color-list->bitmap doc vs. DrRacket rendering

[DexterLagan]

I'm having two problems with color-list->bitmap: the documentation shows a gradient, but when running the example in DrRacket 8.0.900, it only shows the 3 colors without gradient. Also, a lot of colors that work with other functions do not display correctly (i.e. 'dark gray', 'light turquoise' etc).

Doc:

Actual:

Dex

[rfindler]

I believe the difference you're seeing in the two pictures is the different GUI toolkits reacting differently to the scaling request.

[samth]

On my system (Linux, Racket CS), I see the following:

• running in DrRacket looks like @DexterLagan's screenshot of DrRacket
• generating an SVG of the image with (convert ... 'svg-bytes) looks like the image in the docs (with a gradient, checked in two different viewers). This is what the documentation includes.
• generating a PNG of the image with (convert ... 'png-bytes) looks like the DrRacket output (with no gradient)

I'm inclined to think that somethings wrong in the SVG generation.

[samth]

The generated SVG is mostly an inline PNG encoded in base64, which is then scaled up 40x using SVG transforms. If I decode the PNG, then view it, and zoom in repeatedly, eventually the gradient appears in my viewer. This happens in both viewers I tested (Firefox and eog).

My new hypothesis is that scaling in racket/draw is doing an operation somewhat differently than what either SVG or my GUI toolkit do.

Probably these inconsistencies can't be totally fixed, but (1) we should pick a different example in the docs and (2) maybe the SVG output should change?

[DexterLagan]

Of more pressing concern, valid colors displayed correctly by (text) :

...aren't displayed at all by (scale (color-list->bitmap)) :

[DexterLagan]

Source to reproduce the problem: (DrRacket 8.0.900 Win10 x64):

#lang racket
(require 2htdp/image)

(define size 25)
(rotate 90
  (above/align "left"
               (text "Light Brown" size "LightBrown")
               (text "Medium Brown" size "MediumBrown")
               (text "Dark Brown"  size "DarkBrown")
               (text "Medium Cyan"  size "MediumCyan")
               (text "Light Goldenrod"  size "LightGoldenrod")
               (text "Medium Gray"      size  "MediumGray")
               (text "Medium Green"     size  "MediumGreen")
               (text "Light Orange"  size  "LightOrange")
               (text "Medium Orange"  size  "MediumOrange")
               (text "Medium Pink"   size   "MediumPink")
               (text "Dark Pink"     size   "DarkPink")
               (text "Light Purple"   size    "LightPurple")
               (text "Dark Purple"    size     "DarkPurple")
               (text "Light Red"      size      "LightRed")
               (text "Medium Red"     size  "MediumRed")
               (text "Light Turquoise" size  "LightTurquoise")
               (text "Medium Yellow"   size   "MediumYellow")
               (text "Dark Yellow"     size  "DarkYellow")
               (text "Light Blue"      size  "LightBlue")
               (text "Medium Blue"      size  "Medium Blue")
               (text "Dark Blue"      size  "Dark Blue")
               (text "Midnight Blue"      size  "MidnightBlue")))

(define good-colors (list "blue"           ; <- no problem with basic colors
                          "green"
                          "white"
                          "red"
                          "cyan"
                          "orange"))

(define bad-colors (list "LightBrown"      ; <- none of these show up
                         "MediumBrown"
                         "DarkBrown"
                         "MediumCyan"
                         "LightGoldenrod"
                         "MediumGray"
                         "MediumGreen"
                         "LightOrange"
                         "MediumOrange"
                         "MediumPink"
                         "DarkPink"
                         "LightPurple"
                         "DarkPurple"
                         "LightRed"
                         "MediumRed"
                         "LightTurquoise"
                         "MediumYellow"
                         "DarkYellow"
                            
                         "LightBlue"       ; <- strangely, these display OK
                         "Medium Blue"
                         "DarkBlue"
                         "MidnightBlue"))

(scale 50
       (color-list->bitmap good-colors
                           (length good-colors)
                           1))

(scale 50
       (color-list->bitmap bad-colors
                           (length bad-colors)
                           1))

[samth]

The SVG scaling issues could potentially be fixed using CSS on the SVG image element, in particular the image-rendering: crisp-edges style (or pixelated for Chrome). It's not clear if we would want to apply that to all image elements, though.

[rfindler]

Is there a way we can do that at the SVG level? Although I don't think any other scribble backends use svg it does seem like an unfortunate layer crossing to have to do this via CSS.

[samth]

Yes, SVG supports CSS too, we could just add it to the SVG file.

[samth]

Adding this right after the <svg> tag fixes the rendering for me, on both Chrome and Firefox:

  <style>
    image {
       image-rendering: crisp-edges;
       image-rendering: pixelated;
    }
  </style>

[rfindler]

Is there a way to achieve that effect by adjusting svg-dc%?

[samth]

It looks like it would require post-processing the cairo output, which seems mostly unconfigurable (that, or changing the cairo API).