<p><spanclass="sc"><abbrtitle="Too long; didn't read">tl;dr</abbr>: </span> Web typography sucks and we’ll have to wait forever before it will be fixed.</p>
</div>
<p>I stumbled upon <ahref="http://opentypography.org/">open typography</a>. Their main message is:</p>
<blockquote>
<p>«There is no reason to wait for browser development to catch up. We can all create better web typography ourselves, today.»</p>
</blockquote>
<p>As somebody who tried to make my website using some nice typography features and in particular <em>ligatures</em>, I believe this is wrong.</p>
<p>I already made an automatic system which will detect and replace text by their ligatures in my blog. But this I never published this on the web and this is why.</p>
<p>The browser isn’t able to understand that the ligature character “<spanclass="red">fi</span>” should render as <sc>fi</sc> when rendered in small caps. And one part of the problem is you should choose to display a character in small caps using <spanclass="sc">css</span>.</p>
<p>This way, how could you use a ligature Unicode character on a site on which you could change the <spanclass="sc">css</span>?</p>
<p>I took this image from the excellent article of <ahref="http://nitens.org/taraborelli/latex#rare">Dario Taraborelli</a>.</p>
<p>Clearly fix the rendering of ligature in a browser is a difficult task. Simply imagine the number of strange little exceptions:</p>
<ul>
<li>The text is rendered in small caps, I cannot use ligature.</li>
<li>The current word contains a ligature unicode character, I should search for ligature in this one.</li>
<li>The current font does not defined the ligature unicode character, we shouldn’t use it, etc</li>
<li>A javascript command changed the CSS, I should verify if I had to revert the insertion of ligatures characters</li>
<li>etc…</li>
</ul>
<p>Nonetheless if someone has a solution, I would be happy to hear about it.</p>
<sectionclass="footnotes">
<hr/>
<ol>
<liid="fn1"><p>In fact, you might see a ligature and the search works because I now use some CSS ninja skills: <code>text-rendering: optimizelegibility</code>. But it also works because I use the right font; Computer Modern. Steal my CSS at will.<ahref="#fnref1"class="footnote-back">↩</a></p></li>