The Wayback Machine - https://web.archive.org/web/20100702235746/http://gist.github.com:80/452577
kolber (owner)

Forks

Revisions

gist: 452577 Download_button fork
public
Public Clone URL: git://gist.github.com/452577.git
Embed All Files: show embed
optimize-legibility.html #
raw 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cross-browser kerning-pairs & ligatures</title>
    <style>
      body { font-family: sans-serif; background: #f4f3f3; color: rgba(40, 30, 0, 1); width: 500px; margin: 80px 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: 2px 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.bask { font-family: 'baskerville', times; font-style: italic; font-weight: normal; }
      h2:before { content: 'Normal'; font-family: sans-serif; font-style: 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; }
      /*************
        The Magic
      **************/
      h2.kern { text-rendering: optimizeLegibility; }
      /*************
      **************/
      h2.kern:before { content: 'optimizeLegibility'; left: -9.6em; }
    </style>
  </head>
  <h1>Cross-browser kerning-pairs &&nbsp;ligatures</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 5</a>, The&nbsp;<a href="http://nightly.webkit.org/">Webkit&nbsp;Nightlies</a> & <a href="http://www.google.com/chrome">Chrome</a>.</p>
  <p><a href="http://www.mozilla.com/firefox/">Firefox</a> already uses <code>optimizeLegibility</code> by default for text sizes above 20px.</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>Youth</h2>
  <h2 class="kern">Youth</h2>
  <hr>
  <h2 class="bask">traffic</h2>
  <h2 class="bask kern">traffic</h2>
  <hr>
  <h2 class="bask">floret</h2>
  <h2 class="bask kern">floret</h2>
  <hr>
  <small>Gist: <a href="http://gist.github.com/452577">http://gist.github.com/452577</a></small>
  
</html>

4 Comments

pepelsbey commented

Tue Jun 29 10:09:12 -0700 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.

RCanine commented

Tue Jun 29 10:43:52 -0700 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 commented gist owner

Tue Jun 29 15:52:53 -0700 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 commented

Wed Jun 30 16:06:24 -0700 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

Please log in to comment.