Updated the typography and the web article (bugs)

content/html/en/blog/Typography-and-the-Web.md

@@ -16,7 +16,7 @@ macros:
  css: <span class="sc">css</span>
 
 -----
-blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures.");
+blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures.")
 
 begindiv(intro)
 
@@ -37,14 +37,16 @@ I already made an automatic system which will detect and replace text by their l
 
 First, what is a ligatures?
 
-blogimage("ligatures.png", "A ligature example");
+blogimage("ligatures.png", "A ligature example")
 
 What is the problem between the Web and ligatures?
 The first one is: you cannot search them. For example, try to search the word "first":
 
-- first ← No ligature, no problem
+- first ← No ligature, no problem[^1]
 - <span style="color: #800">fi</span>r<span style="color: #800">st </span> ← ligature nice but unsearchable
 
+[^1]: In fact, you might see a ligature and the search works because I now use some CSS ninja skills: `text-rendering: optimizelegibility`. But it also works because I use the right font; Computer Modern. Steal my CSS at will.
+
 The second one is the rendering, for example, try to use a ligature character with small caps:
 
 - <sc>first</sc>
@@ -52,7 +54,7 @@ The second one is the rendering, for example, try to use a ligature character wi
 
 Here is a screenshot of what I see:
 
-blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures.");
+blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures.")
 
 The browser isn't able to understand that the ligature character "<span style="color:#800">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 %css.
 
@@ -60,7 +62,7 @@ This way, how could you use a ligature Unicode character on a site on which you
 
 Let's compare to %latex.
 
-blogimage("first_latex_screenshot.png", "LaTeX screenshot");
+blogimage("first_latex_screenshot.png", "LaTeX screenshot")
 
 If you take attention to detail, you'll see the first "first" contains a ligature. Of course the second render nicely. The code I used were:
 
@@ -73,7 +75,7 @@ If you take attention to detail, you'll see the first "first" contains a ligatur
 
 The "<span style="color:#800">st</span>" ligature is rare and not rendered in %latex by default. But if you want you could also render rare ligature using %xelatex:
 
-blogimage("xelatex_ligatures.jpg","XeLaTeX ligatures");
+blogimage("xelatex_ligatures.jpg","XeLaTeX ligatures")
 
 I took this image from the excellent article of [Dario Taraborelli](http://nitens.org/taraborelli/latex#rare).
 

content/html/fr/blog/Typography-and-the-Web.md

@@ -16,7 +16,7 @@ macros:
  css: <span class="sc">css</span>
 
 -----
-blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures.");
+blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures.")
 
 begindiv(intro)
 
@@ -42,14 +42,16 @@ Cependant je n'ai jamais publié cette amélioration sur le web et voilà pourqu
 
 Tout d'abord, qu'est-ce qu'un ligature ?
 
-blogimage("ligatures.png", "A ligature example");
+blogimage("ligatures.png", "A ligature example")
 
 Quel est le problème des ligatures sur le web ?
 Le premier c'est que vous ne pouvez pas chercher les mots qui contiennent ces ligatures. Par exemple essayez de chercher le mot "first".
 
-- first ←  Pas de ligature, pas de problème.
+- first ←  Pas de ligature, pas de problème[^1].
 - <span style="color: #800">fi</span>r<span style="color: #800">st </span> ← Une jolie ligature, mais introuvable avec une recherche (<code>C-f</code>).
 
+[^1]: En réalité, vous devriez pouvoir voir une ligature. Maintenant j'utilise : `text-rendering: optimizelegibility`. Le rendu est correct parce que j'utilise une fonte correct, à savoir Computer Modern de Donald Knuth.
+
 Le second problème est le rendu. Par exemple, essayer d'utiliser un charactère de ligature en petites capitales :
 
 - <sc>first</sc>
@@ -57,7 +59,7 @@ Le second problème est le rendu. Par exemple, essayer d'utiliser un charactère
 
 Voici une capture d'écran pour que vous voyez ce que je vois :
 
-blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures.");
+blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures.")
 
 Le navigateur est incapable de comprendre que le caractère de ligature "<span style="color:#800">fi</span>" doit être rendu comme <sc>fi</sc> lorsqu'il est en petites capitales. 
 Et une part du problème est que l'on peut décider d'écrire en petite majuscule dans le %css.
@@ -66,7 +68,7 @@ Comment par exemple utiliser un charactère de ligature unicode sur un site qui
 
 Comparons à %latex
 
-blogimage("first_latex_screenshot.png", "LaTeX screenshot");
+blogimage("first_latex_screenshot.png", "LaTeX screenshot")
 
 Si vous faites attention au détail, vous constaterez que le premier "first" contient une ligature. Bien entendu la deuxième ligne est affichée correctement. Le code que j'ai utilisé pour avoir ce rendu est simplement :
 
@@ -80,7 +82,7 @@ Si vous faites attention au détail, vous constaterez que le premier "first" con
 La ligature "<span style="color:#800">st</span>" est rare et n'est pas rendu par défaut par %latex. 
 Si vous voulez voir des ligatures rares, vous pouvez utiliser %xelatex:
 
-blogimage("xelatex_ligatures.jpg","XeLaTeX ligatures");
+blogimage("xelatex_ligatures.jpg","XeLaTeX ligatures")
 
 J'ai copié cette image de l'excellent article de [Dario Taraborelli](http://nitens.org/taraborelli/latex#rare).
 

multi/blog/Typography-and-the-Web.md

@@ -17,7 +17,7 @@ macros:
  css: <span class="sc">css</span>
 
 -----
-blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures.");
+blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures.")
 
 begindiv(intro)
 
@@ -48,18 +48,21 @@ fr: Cependant je n'ai jamais publié cette amélioration sur le web et voilà po
 en: First, what is a ligatures?
 fr: Tout d'abord, qu'est-ce qu'un ligature ?
 
-blogimage("ligatures.png", "A ligature example");
+blogimage("ligatures.png", "A ligature example")
 
 en: What is the problem between the Web and ligatures?
 en: The first one is: you cannot search them. For example, try to search the word "first":
 fr: Quel est le problème des ligatures sur le web ?
 fr: Le premier c'est que vous ne pouvez pas chercher les mots qui contiennent ces ligatures. Par exemple essayez de chercher le mot "first".
 
-en: - first ← No ligature, no problem
+en: - first ← No ligature, no problem[^1]
 en: - <span style="color: #800">fi</span>r<span style="color: #800">st </span> ← ligature nice but unsearchable
-fr: - first ←  Pas de ligature, pas de problème.
+fr: - first ←  Pas de ligature, pas de problème[^1].
 fr: - <span style="color: #800">fi</span>r<span style="color: #800">st </span> ← Une jolie ligature, mais introuvable avec une recherche (<code>C-f</code>).
 
+en: [^1]: In fact, you might see a ligature and the search works because I now use some CSS ninja skills: `text-rendering: optimizelegibility`. But it also works because I use the right font; Computer Modern. Steal my CSS at will.
+fr: [^1]: En réalité, vous devriez pouvoir voir une ligature. Maintenant j'utilise : `text-rendering: optimizelegibility`. Le rendu est correct parce que j'utilise une fonte correct, à savoir Computer Modern de Donald Knuth.
+
 en: The second one is the rendering, for example, try to use a ligature character with small caps:
 fr: Le second problème est le rendu. Par exemple, essayer d'utiliser un charactère de ligature en petites capitales :
 
@@ -69,7 +72,7 @@ fr: Le second problème est le rendu. Par exemple, essayer d'utiliser un charact
 en: Here is a screenshot of what I see:
 fr: Voici une capture d'écran pour que vous voyez ce que je vois :
 
-blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures.");
+blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures.")
 
 en: The browser isn't able to understand that the ligature character "<span style="color:#800">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 %css.
 fr: Le navigateur est incapable de comprendre que le caractère de ligature "<span style="color:#800">fi</span>" doit être rendu comme <sc>fi</sc> lorsqu'il est en petites capitales. 
@@ -81,7 +84,7 @@ fr: Comment par exemple utiliser un charactère de ligature unicode sur un site
 en: Let's compare to %latex.
 fr: Comparons à %latex
 
-blogimage("first_latex_screenshot.png", "LaTeX screenshot");
+blogimage("first_latex_screenshot.png", "LaTeX screenshot")
 
 en: If you take attention to detail, you'll see the first "first" contains a ligature. Of course the second render nicely. The code I used were:
 fr: Si vous faites attention au détail, vous constaterez que le premier "first" contient une ligature. Bien entendu la deuxième ligne est affichée correctement. Le code que j'ai utilisé pour avoir ce rendu est simplement :
@@ -98,7 +101,7 @@ en: The "<span style="color:#800">st</span>" ligature is rare and not rendered
 fr: La ligature "<span style="color:#800">st</span>" est rare et n'est pas rendu par défaut par %latex. 
 fr: Si vous voulez voir des ligatures rares, vous pouvez utiliser %xelatex:
 
-blogimage("xelatex_ligatures.jpg","XeLaTeX ligatures");
+blogimage("xelatex_ligatures.jpg","XeLaTeX ligatures")
 
 en: I took this image from the excellent article of [Dario Taraborelli](http://nitens.org/taraborelli/latex#rare).
 fr: J'ai copié cette image de l'excellent article de [Dario Taraborelli](http://nitens.org/taraborelli/latex#rare).

output/Scratch/en/blog/feed/feed.xml

@@ -80,7 +80,7 @@
       <uri>yannesposito.com</uri>
     </author>
     <link rel="alternate" href="http://yannesposito.com/Scratch/en/blog/Typography-and-the-Web/"/>
-    <content type="html">&lt;p&gt;&lt;img alt="Screenshot of first in small caps with and without ligatures." src="/Scratch/img/blog/Typography-and-the-Web/first_sc_screenshot.png" /&gt;;&lt;/p&gt;
+    <content type="html">&lt;p&gt;&lt;img alt="Screenshot of first in small caps with and without ligatures." src="/Scratch/img/blog/Typography-and-the-Web/first_sc_screenshot.png" /&gt;&lt;/p&gt;
 
 
 &lt;div class="intro"&gt;
@@ -101,7 +101,7 @@ We can all create better web typography ourselves, today.&#187;&lt;/p&gt;
 
 &lt;p&gt;As somebody who tried to make my website using some nice typography features and in particular &lt;em&gt;ligatures&lt;/em&gt;, I believe this is wrong.&lt;/p&gt;
 
-&lt;p&gt;I already made an autom...&lt;/p&gt;&lt;/p&gt;</content>
+&lt;p&gt;I already made an automa...&lt;/p&gt;&lt;/p&gt;</content>
   </entry>
   <entry>
     <id>tag:yannesposito.com,2012-01-15:/Scratch/en/blog/Yesod-tutorial-for-newbies/</id>

output/Scratch/fr/blog/feed/feed.xml

@@ -79,7 +79,7 @@
       <uri>yannesposito.com</uri>
     </author>
     <link rel="alternate" href="http://yannesposito.com/Scratch/fr/blog/Typography-and-the-Web/"/>
-    <content type="html">&lt;p&gt;&lt;img alt="Screenshot of first in small caps with and without ligatures." src="/Scratch/img/blog/Typography-and-the-Web/first_sc_screenshot.png" /&gt;;&lt;/p&gt;
+    <content type="html">&lt;p&gt;&lt;img alt="Screenshot of first in small caps with and without ligatures." src="/Scratch/img/blog/Typography-and-the-Web/first_sc_screenshot.png" /&gt;&lt;/p&gt;
 
 
 &lt;div class="intro"&gt;
@@ -102,7 +102,7 @@ We can all create better web typography ourselves, today.&#187;&lt;/p&gt;
 
 &lt;blockquote&gt;
   &lt;p&gt;&#171;Nous ne somme pas oblig&#233; d&amp;rsquo;attendre le d&#233;veloppement des navigateurs.
-Nous pou...&lt;/p&gt;&lt;/blockquote&gt;&lt;/p&gt;</content>
+Nous pouv...&lt;/p&gt;&lt;/blockquote&gt;&lt;/p&gt;</content>
   </entry>
   <entry>
     <id>tag:yannesposito.com,2012-01-15:/Scratch/fr/blog/Yesod-tutorial-for-newbies/</id>