154 lines
10 KiB
HTML
154 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>YBlog - La typography et le Web</title>
|
||
<meta name="keywords" content="web, design, typography" />
|
||
|
||
<link rel="shortcut icon" type="image/x-icon" href="../../../../Scratch/img/favicon.ico" />
|
||
<link rel="stylesheet" type="text/css" href="../../../../css/y.css" />
|
||
<link rel="stylesheet" type="text/css" href="/css/legacy.css" />
|
||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="apple-touch-icon" href="../../../../Scratch/img/about/FlatAvatar@2x.png" />
|
||
<!--[if lt IE 9]>
|
||
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
|
||
<![endif]-->
|
||
<!-- IndieAuth -->
|
||
<link href="https://twitter.com/yogsototh" rel="me">
|
||
<link href="https://github.com/yogsototh" rel="me">
|
||
<link href="mailto:yann.esposito@gmail.com" rel="me">
|
||
<link rel="pgpkey" href="../../../../pubkey.txt">
|
||
</head>
|
||
<body lang="fr" class="article">
|
||
<div id="content">
|
||
<div id="header">
|
||
<div id="choix">
|
||
<span id="choixlang">
|
||
<a href="../../../../Scratch/en/blog/Typography-and-the-Web/">Anglais</a>
|
||
</span>
|
||
<span class="tomenu"><a href="#navigation">↓ Menu ↓</a></span>
|
||
<span class="flush"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="titre">
|
||
<h1>La typography et le Web</h1>
|
||
|
||
</div>
|
||
<div class="flush"></div>
|
||
<div id="afterheader" class="article">
|
||
<div class="corps">
|
||
<div>
|
||
<img src="../../../../Scratch/img/blog/Typography-and-the-Web/first_sc_screenshot.png" alt />
|
||
</div>
|
||
<div class="intro">
|
||
<p><span class="sc"><abbr title="Trop long; pas lu">tlpl</abbr>: </span> La typography sur le web est pourrie et nous ne somme pas près de voir ce problème réparé.</p>
|
||
</div>
|
||
<p>Je suis tombé sur ce site: <a href="http://opentypography.org/">open typography</a>. Leur message principal est :</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>ou en français :</p>
|
||
<blockquote>
|
||
<p>«Nous ne somme pas obligé d’attendre le développement des navigateurs. Nous pouvons créer un web avec une meilleure typographie aujourd’hui.»</p>
|
||
</blockquote>
|
||
<p>Comme quelqu’un qui a déjà essayé d’améliorer la typographie de son site web, et en particulier des <em>ligatures</em>, je crois que c’est faux.</p>
|
||
<p>J’ai déjà écrit un système automatique qui détecte et ajoute des ligatures en utilisant des caractères unicode. Cependant je n’ai jamais publié cette amélioration sur le web et voilà pourquoi :</p>
|
||
<p>Tout d’abord, qu’est-ce qu’un ligature ?</p>
|
||
<div>
|
||
<img src="../../../../Scratch/img/blog/Typography-and-the-Web/ligatures.png" alt />
|
||
</div>
|
||
<p>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”.</p>
|
||
<ul>
|
||
<li>first ← Pas de ligature, pas de problème<a href="#fn1" class="footnote-ref" id="fnref1"><sup>1</sup></a>.</li>
|
||
<li><span class="red">fi</span>r<span class="red">st </span> ← Une jolie ligature, mais introuvable avec une recherche (<code>C-f</code>).</li>
|
||
</ul>
|
||
<p>Le second problème est le rendu. Par exemple, essayer d’utiliser un charactère de ligature en petites capitales :</p>
|
||
<ul>
|
||
<li><sc>first</sc></li>
|
||
<li><sc><span class="red">fi</span>r<span class="red">st</span></sc></li>
|
||
</ul>
|
||
<p>Voici une capture d’écran pour que vous voyez ce que je vois :</p>
|
||
<div>
|
||
<img src="../../../../Scratch/img/blog/Typography-and-the-Web/first_sc_screenshot.png" alt />
|
||
</div>
|
||
<p>Le navigateur est incapable de comprendre que le caractère de ligature “<span class="red">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 <span class="sc">css</span>.</p>
|
||
<p>Comment par exemple utiliser un charactère de ligature unicode sur un site qui possède différents rendus via différentes <span class="sc">css</span> ?</p>
|
||
<p>Comparons à <span style="text-transform: uppercase">L<sup style="vertical-align: 0.15em; margin-left: -0.36em; margin-right: -0.15em; font-size: .85em">a</sup>T<sub style="vertical-align: -0.5ex; margin-left: -0.1667em; margin-right: -0.125em; font-size: 1em">e</sub>X</span></p>
|
||
<div>
|
||
<img src="../../../../Scratch/img/blog/Typography-and-the-Web/first_latex_screenshot.png" alt />
|
||
</div>
|
||
<p>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 :</p>
|
||
<div class="sourceCode" id="cb1"><pre class="sourceCode latex"><code class="sourceCode latex"><a class="sourceLine" id="cb1-1" title="1"><span class="fu">\item</span> first</a>
|
||
<a class="sourceLine" id="cb1-2" title="2"><span class="fu">\item</span> {<span class="fu">\sc</span> first}</a></code></pre></div>
|
||
<p><span style="text-transform: uppercase">L<sup style="vertical-align: 0.15em; margin-left: -0.36em; margin-right: -0.15em; font-size: .85em">a</sup>T<sub style="vertical-align: -0.5ex; margin-left: -0.1667em; margin-right: -0.125em; font-size: 1em">e</sub>X</span> a été suffisamment intelligent pour créer les ligatures si nécessaire.</p>
|
||
<p>La ligature “<span class="red">st</span>” est rare et n’est pas rendu par défaut par <span style="text-transform: uppercase">L<sup style="vertical-align: 0.15em; margin-left: -0.36em; margin-right: -0.15em; font-size: .85em">a</sup>T<sub style="vertical-align: -0.5ex; margin-left: -0.1667em; margin-right: -0.125em; font-size: 1em">e</sub>X</span>. Si vous voulez voir des ligatures rares, vous pouvez utiliser <span style="text-transform: uppercase">X<sub style="vertical-align: -0.5ex; margin-left: -0.1667em; margin-right: -0.125em; font-size: 1em">Ǝ</sub>L<sup style="vertical-align: 0.15em; margin-left: -0.36em; margin-right: -0.15em; font-size: .85em">a</sup>T<sub style="vertical-align: -0.5ex; margin-left: -0.1667em; margin-right: -0.125em; font-size: 1em">e</sub>X</span>:</p>
|
||
<div>
|
||
<img src="../../../../Scratch/img/blog/Typography-and-the-Web/xelatex_ligatures.jpg" alt="XeLaTeX ligatures" />
|
||
</div>
|
||
<p>J’ai copié cette image de l’excellent article de <a href="http://nitens.org/taraborelli/latex#rare">Dario Taraborelli</a>.</p>
|
||
<p>Clairement il sera difficile aux navigateurs de corriger ces problèmes. Imaginez le nombre de petites exceptions.</p>
|
||
<ul>
|
||
<li>Le texte est en petites capitales, je ne dois pas utiliser de ligatures.</li>
|
||
<li>Le mot courant contient un caractère de ligature, je ne dois pas chercher d’autre ligature dans ce mot.</li>
|
||
<li>La fonte n’a pas défini de caractère unicode pour la ligature, je ne dois pas l’utiliser.</li>
|
||
<li>Une commande javascript a modifé le CSS, je dois vérifier si je dois remplacer les ligatures par les deux caractères.</li>
|
||
<li>etc…</li>
|
||
</ul>
|
||
<p>Dans tous les cas, si quelqu’un possède une solution je suis preneur !</p>
|
||
<section class="footnotes">
|
||
<hr />
|
||
<ol>
|
||
<li id="fn1"><p>En réalité, vous devriez pouvoir voir une ligature. Maintenant j’utilise : <code>text-rendering: optimizelegibility</code>. Le rendu est correct parce que j’utilise une fonte correct, à savoir Computer Modern de Donald Knuth.<a href="#fnref1" class="footnote-back">↩</a></p></li>
|
||
</ol>
|
||
</section>
|
||
</div>
|
||
<div id="afterarticle">
|
||
<div id="social">
|
||
<a href="/rss.xml" target="_blank" rel="noopener noreferrer nofollow" class="social">RSS</a>
|
||
·
|
||
<a href="https://twitter.com/home?status=http%3A%2F%2Fyannesposito.com/Scratch/fr/blog/Typography-and-the-Web/%20via%20@yogsototh" target="_blank" rel="noopener noreferrer nofollow" class="social">Tweet</a>
|
||
·
|
||
<a href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fyannesposito.com/Scratch/fr/blog/Typography-and-the-Web/" target="_blank" rel="noopener noreferrer nofollow" class="social">FB</a>
|
||
<br />
|
||
<a class="message" href="../../../../Scratch/fr/blog/Social-link-the-right-way/">Ces liens sociaux préservent votre vie privée</a>
|
||
</div>
|
||
<div id="navigation">
|
||
<a href="../../../../">Accueil</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/blog">Blog</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/softwares">Logiciels</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/about">Auteur</a>
|
||
</div>
|
||
<div id="totop"><a href="#header">↑ Top ↑</a></div>
|
||
<div id="bottom">
|
||
<div>
|
||
Published on 2012-02-02
|
||
</div>
|
||
<div>
|
||
<a href="https://twitter.com/yogsototh">Follow @yogsototh</a>
|
||
</div>
|
||
<div>
|
||
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Yann Esposito©</a>
|
||
</div>
|
||
|
||
<div>
|
||
Done with
|
||
<a href="http://www.vim.org" target="_blank" rel="noopener noreferrer nofollow"><strike>Vim</strike></a>
|
||
<a href="http://spacemacs.org" target="_blank" rel="noopener noreferrer nofollow">spacemacs</a>
|
||
<span class="pala">&</span>
|
||
<a href="http://nanoc.ws" target="_blank" rel="noopener noreferrer nofollow"><strike>nanoc</strike></a>
|
||
<a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer nofollow">Hakyll</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|