Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Finding a portable retina-compatible solution #12
Investigate options for embedding the font into the SVG so as to allow the SVG to be easily portable.
Convert OpenSans to an SVG font* and embed it into the SVG
Convert OpenSans to an SVG font* and link externally
Convert to Outlines
I've been looking into a way to create a Redcarpet renderer that extends the Markdown one with a new image tag that allows two sources — one at 1x and the second at 2x. I think that's the most practical idea given the limitations in order to achieve retina shields.
Now the problem is that it introduces a dependency on the GitHub team, but since @sferik was asking how he could help the effort, maybe there's a chance.
Yeah, that's the only viable option I see. Basically update Markdown to support an extra 2x source like this:
<div data-picture data-alt="I'm a banana"> <div data-src="banana.png"></div> <div data-src="banana_retina.png" data-media="(min-device-pixel-ratio: 2.0)"></div> <noscript> <img src="banana.png" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </noscript> </div>
Since Picturefill is ridiculously small, that makes it a decent candidate.
Unfortunately it's really not possible for us to get the image dimensions before hand (and know how to resize it for a retina or not). I forget the reasons (I feel like it was another security issue), but it's something I wanted really badly for completely unrelated reasons (page jumps on slow connections).
I think a much better philosophy would be to choose a hard-coded height, and suggest that style of embedding. Instead of:
You would include:
Browsers are smart enough to resize the width accordingly, but this allows for images that are 76px high to show up as 38px high.
It sucks to have to tie image-generation to embedding style, but this new future can be confusing sometimes.
That's a pragmatic solution.
I think it looks alright on my non-retina screen but it does change the font rendering dramatically. I'm wondering if I shouldn't switch the font rendering to strong. See the last example. What do you think @ackerdev?
@1x on non-retina screen
@2x on non-retina screen with sharp font rendering
@2x on non-retina screen with strong font rendering (left column only)
Strong looks better from weight of the text being closer, though the PSD is a bit outdated by now so I'm not sure how it will end up different regarding the SVG export.
I'll export the demo image @2x sometime today from the SVG (with other text-rendering modes like you have if they seem pertinent) and post it here for consideration.
@2x Semibold + Crisp
Semibold font weight + Crisp rendering is closest so far. Could probably reduce the vertical scale by 10% and it might look pretty darn close. Will play around more with that tomorrow, but semibold+crisp looks like the winning combo from here.
Will post an update if I find a better rendering combo.
Oh cool, do you have time to export into @2x for all the existing badges?
I'm starting to see the Code Climate badges roll out into repos, I would hate to make everyone do a second roll out with retina-friendly shields right after they updated all their READMEs for Shields 1.0
Found out that exporting with "Type Optimization (Hinted)" also helps sharpen up that font. Subpixel AA was causing the fonts to blur out at the normal resolution
A: @2x Semibold + Sharp + Hinted AA
B: @2x Semibold + Strong + Hinted AA
I think A looks the best so far, looks closest to the original's weight and looks readable to me.
Again, I didn't bother touching the placement of the text yet, just trying to keep things consistent to tell which font treatment actually works best. Will take care of it for when I go through with it.