Create a gist now

Instantly share code, notes, and snippets.

Embed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
body { font-family: sans-serif; background: rgba(30, 10, 0, 0.1); color: rgba(40, 30, 0, 1); width: 500px; margin: 100px auto; padding: 0px; }
a { color: rgba(15, 10, 0, 0.8); text-decoration: none; border-bottom: 1px solid; padding: 1px; -webkit-transition: background 1s ease; }
a:hover { background: rgba(0, 220, 220, 0.2); }
p { line-height: 1.5; padding: 0px 1em 0em 0em; }
code { background: rgba(0, 220, 220, 0.2); padding: 4px; }
small { font-size: 0.9em; }
hr { background: none; border-top: 1px dotted rgba(40, 30, 0, 0.85); margin: 20px 0px; }
h2 { font-size: 5em; margin: 0px; position: relative; }
h2:before { content: 'Normal'; font-size: 11px; padding: 2px 5px 1px; background: rgba(25, 20, 0, 0.15); color: rgba(25, 20, 0, 0.6); position: absolute; left: -5.4em; top: 3.5em; font-weight: normal; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
h2.kern { text-rendering: optimizeLegibility; }
h2.kern:before { content: 'optimizeLegibility'; left: -9.6em; }
</style>
</head>
<h1>Cross-browser auto-kerning</h1>
<p>Improved handling of kerning pairs and ligatures in modern browsers using the <code>text-rendering: optimizeLegibility;</code> declaration.</p>
<p>The declaration is currently supported by:<br>
<a href="http://www.apple.com/safari/">Safari</a>, The&nbsp;<a href="http://nightly.webkit.org/">Webkit&nbsp;Nightlies</a> & <a href="http://www.google.com/chrome">Chrome</a>.<br>
Firefox already auto-kerns by default.</p>
<hr>
<h2>AVAST</h2>
<h2 class="kern">AVAST</h2>
<hr>
<h2>LOVELY</h2>
<h2 class="kern">LOVELY</h2>
<hr>
<h2>True Type</h2>
<h2 class="kern">True Type</h2>
<hr>
<h2>Verily</h2>
<h2 class="kern">Verily</h2>
<hr>
<small>Gist: <a href="http://gist.github.com/455297">http://gist.github.com/455297</a></small>
</html>
@pepelsbey

This comment has been minimized.

Show comment
Hide comment
@pepelsbey

pepelsbey Jun 29, 2010

A bit offtopic, but: what's the point of writing background color of body in this manner? — background: rgba(30, 10, 0, 0.05) — this is just #F4F3F3 (faster for rengering, I guess) and you actually relying on default background color in particular browser, which can be changed:

Why I'm asking? It's seriously harms rendering in Opera browser. I know, this is problem of Opera, but I'm just curious.

A bit offtopic, but: what's the point of writing background color of body in this manner? — background: rgba(30, 10, 0, 0.05) — this is just #F4F3F3 (faster for rengering, I guess) and you actually relying on default background color in particular browser, which can be changed:

Why I'm asking? It's seriously harms rendering in Opera browser. I know, this is problem of Opera, but I'm just curious.

@Ry7n

This comment has been minimized.

Show comment
Hide comment
@Ry7n

Ry7n Jun 29, 2010

This demo text is a bit deceiving. Safari 4/Mac doesn't appear to support it, and Firefox automatically uses ligatures on text 20px or larger.

Nice improvement for those headlines in Chrome, but I think it's not a good idea to turn it on across the board.

Ry7n commented Jun 29, 2010

This demo text is a bit deceiving. Safari 4/Mac doesn't appear to support it, and Firefox automatically uses ligatures on text 20px or larger.

Nice improvement for those headlines in Chrome, but I think it's not a good idea to turn it on across the board.

@kolber

This comment has been minimized.

Show comment
Hide comment
@kolber

kolber Jun 29, 2010

@pepelsbey I was playing around with background contrast and found it much easier than trying to work out the hex backwards. I wouldn't recommend doing this on a production site.

@RCanine thanks, I will update the text to reflect this. I have done some basic testing with larger amounts of text and it doesn't seem to actually take a noticeable performance hit.

Owner

kolber commented Jun 29, 2010

@pepelsbey I was playing around with background contrast and found it much easier than trying to work out the hex backwards. I wouldn't recommend doing this on a production site.

@RCanine thanks, I will update the text to reflect this. I have done some basic testing with larger amounts of text and it doesn't seem to actually take a noticeable performance hit.

@johnmichel

This comment has been minimized.

Show comment
Hide comment
@johnmichel

johnmichel Jun 30, 2010

I've created a Chrome/Chromium extension that automatically turns this CSS property on for every page. It can be found here: http://github.com/johnmichel/Optimize-Legibility-for-Chrome

I've created a Chrome/Chromium extension that automatically turns this CSS property on for every page. It can be found here: http://github.com/johnmichel/Optimize-Legibility-for-Chrome

@bquorning

This comment has been minimized.

Show comment
Hide comment
@bquorning

bquorning Oct 17, 2010

I filed a bug report to Apple yesterday, telling that Safari crashes when I use text-rendering: optimizeLegibility together with either margin, padding, border-width or outline-width measured in ex. It works fine with em, px, in, % etc., though. I’ve put together an example page at http://quorning.net/safari_crash.htm

I filed a bug report to Apple yesterday, telling that Safari crashes when I use text-rendering: optimizeLegibility together with either margin, padding, border-width or outline-width measured in ex. It works fine with em, px, in, % etc., though. I’ve put together an example page at http://quorning.net/safari_crash.htm

@kolber

This comment has been minimized.

Show comment
Hide comment
@kolber

kolber Oct 21, 2010

Thanks for the heads up.
I've added the bug to the caveats list.

Owner

kolber commented Oct 21, 2010

Thanks for the heads up.
I've added the bug to the caveats list.

@simondell

This comment has been minimized.

Show comment
Hide comment
@simondell

simondell Nov 23, 2012

I've spent nearly a day trying to work out why Android 2.3's Browser (via browserstack) was crashing out completely on a fairly simple page. I looks to be suffering the same ex-units bug as the Safari versions discussed already. Perhaps an old Webkit issue rather than just Safari? It seems resolved in newer Androids and iOS versions, but it's worth noting if you're legacy device testing.

I've spent nearly a day trying to work out why Android 2.3's Browser (via browserstack) was crashing out completely on a fairly simple page. I looks to be suffering the same ex-units bug as the Safari versions discussed already. Perhaps an old Webkit issue rather than just Safari? It seems resolved in newer Androids and iOS versions, but it's worth noting if you're legacy device testing.

@Zeokat

This comment has been minimized.

Show comment
Hide comment
@Zeokat

Zeokat Mar 9, 2014

Zeokat nice theme, thanks!

Zeokat commented Mar 9, 2014

Zeokat nice theme, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment