257 lines
No EOL
13 KiB
HTML
257 lines
No EOL
13 KiB
HTML
<?xml version="1.0" encoding="utf-8"?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
|
|
<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="/Scratch/assets/css/main.css" />
|
|
<link rel="stylesheet" type="text/css" href="/Scratch/css/twilight.css" />
|
|
<link rel="stylesheet" type="text/css" href="/Scratch/css/idc.css" />
|
|
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocomfr"/>
|
|
|
|
<link rel="alternate" lang="fr" xml:lang="fr" title="La typography et le Web" type="text/html" hreflang="fr" href="/Scratch/fr/blog/Typography-and-the-Web/" />
|
|
<link rel="alternate" lang="en" xml:lang="en" title="Typography and the Web" type="text/html" hreflang="en" href="/Scratch/en/blog/Typography-and-the-Web/" />
|
|
<script type="text/javascript" src="/Scratch/js/jquery-1.3.1.min.js"></script>
|
|
<script type="text/javascript" src="/Scratch/js/jquery.cookie.js"></script>
|
|
<script type="text/javascript" src="/Scratch/js/index.js"></script>
|
|
<!--[if lt IE 9]>
|
|
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
|
|
<![endif]-->
|
|
<title>La typography et le Web</title>
|
|
</head>
|
|
<body lang="fr" class="article">
|
|
<script type="text/javascript">// <![CDATA[
|
|
document.write('<div id="blackpage"><img src="/Scratch/img/loading.gif" alt="Chargement en cours..."/></div>');
|
|
// ]]>
|
|
</script>
|
|
|
|
<div id="content">
|
|
|
|
<div id="choix">
|
|
<div class="return"><a href="#entete">↓ Menu ↓</a></div>
|
|
<div id="choixlang">
|
|
<a href="/Scratch/en/blog/Typography-and-the-Web/" onclick="setLanguage('en')">in English</a>
|
|
</div>
|
|
<div class="flush"></div>
|
|
</div>
|
|
<div id="titre">
|
|
<h1>
|
|
La typography et le Web
|
|
</h1>
|
|
|
|
</div>
|
|
<div class="flush"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flush"></div>
|
|
<div id="afterheader">
|
|
<div class="corps">
|
|
<p><img alt="Screenshot of first in small caps with and without ligatures." src="/Scratch/img/blog/Typography-and-the-Web/first_sc_screenshot.png" /></p>
|
|
|
|
|
|
<div class="intro">
|
|
|
|
|
|
<p><span class="sc"><abbr title="Trop long à lire">tlàl</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>
|
|
|
|
<p><img alt="A ligature example" src="/Scratch/img/blog/Typography-and-the-Web/ligatures.png" /></p>
|
|
|
|
<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.</li>
|
|
<li><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>).</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>
|
|
<span class="sc">first</span>
|
|
</li>
|
|
<li>
|
|
<span class="sc"><span style="color:#800">fi</span>r<span style="color:#800">st</span></span>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>Voici une capture d’écran pour que vous voyez ce que je vois :</p>
|
|
|
|
<p><img alt="Screenshot of first in small caps with and without ligatures." src="/Scratch/img/blog/Typography-and-the-Web/first_sc_screenshot.png" /></p>
|
|
|
|
<p>Le navigateur est incapable de comprendre que le caractère de ligature “<span style="color:#800">fi</span>” doit être rendu comme <span class="sc">fi</span> 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>
|
|
|
|
<p><img alt="LaTeX screenshot" src="/Scratch/img/blog/Typography-and-the-Web/first_latex_screenshot.png" /></p>
|
|
|
|
<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>
|
|
|
|
<pre class="twilight">
|
|
<span class="Keyword"><span class="Keyword">\</span>item</span> first
|
|
<span class="Keyword"><span class="Keyword">\</span>item</span> {<span class="SupportFunction"><span class="SupportFunction">\</span>sc</span> first}
|
|
</pre>
|
|
|
|
<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 style="color:#800">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>
|
|
|
|
<p><img alt="XeLaTeX ligatures" src="/Scratch/img/blog/Typography-and-the-Web/xelatex_ligatures.jpg" /></p>
|
|
|
|
<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>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="choixrss">
|
|
<a id="rss" href="http://feeds.feedburner.com/yannespositocomfr">
|
|
s'abonner
|
|
</a>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
$('#comment').hide();
|
|
$('#clickcomment').click(showComments);
|
|
});
|
|
function showComments() {
|
|
$('#comment').show();
|
|
$('#clickcomment').fadeOut();
|
|
}
|
|
document.write('<div id="clickcomment">Commentaires</div>');
|
|
</script>
|
|
<div class="flush"></div>
|
|
<div class="corps" id="comment">
|
|
<h2 class="first">commentaires</h2>
|
|
<noscript>
|
|
Vous devez activer javascript pour commenter.
|
|
</noscript>
|
|
|
|
<script type="text/javascript">
|
|
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
|
|
var idcomments_post_id = '/Scratch/fr/blog/Typography-and-the-Web/';
|
|
var idcomments_post_url = 'http://yannesposito.com/Scratch/fr/blog/Typography-and-the-Web/';
|
|
</script>
|
|
<span id="IDCommentsPostTitle" style="display:none"></span>
|
|
<script type='text/javascript' src='/Scratch/js/genericCommentWrapperV2.js'></script>
|
|
|
|
</div>
|
|
|
|
<div id="entete" class="corps_spaced">
|
|
<div id="liens">
|
|
<ul><li><a href="/Scratch/fr/">Bienvenue</a></li>
|
|
<li><a href="/Scratch/fr/blog/">Blog</a></li>
|
|
<li><a href="/Scratch/fr/softwares/">Softwares</a></li>
|
|
<li><a href="/Scratch/fr/about/">À propos</a></li></ul>
|
|
</div>
|
|
<div class="flush"></div>
|
|
<hr/>
|
|
<div id="next_before_articles">
|
|
<div id="previous_articles">
|
|
articles précédents
|
|
|
|
<div class="previous_article">
|
|
<a href="/Scratch/fr/blog/Yesod-tutorial-for-newbies/"><span class="nicer">«</span> Site en Haskell</a>
|
|
</div>
|
|
|
|
|
|
<div class="previous_article">
|
|
<a href="/Scratch/fr/blog/SVG-and-m4-fractals/"><span class="nicer">«</span> Accroître le pouvoir des languages déficients.</a>
|
|
</div>
|
|
|
|
|
|
<div class="previous_article">
|
|
<a href="/Scratch/fr/blog/Yesod-excellent-ideas/"><span class="nicer">«</span> Les idées de yesod</a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div id="next_articles">
|
|
articles suivants
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div class="flush"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="bottom">
|
|
<div>
|
|
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.fr">Droits de reproduction ©, Yann Esposito</a>
|
|
</div>
|
|
<div id="lastmod">
|
|
Écrit le : 02/02/2012
|
|
modifié le : 02/02/2012
|
|
</div>
|
|
<div>
|
|
Site entièrement réalisé avec
|
|
<a href="http://www.vim.org">Vim</a>
|
|
et
|
|
<a href="http://nanoc.stoneship.org">nanoc</a>
|
|
</div>
|
|
<div>
|
|
<a href="/Scratch/fr/validation/">Validation</a>
|
|
<a href="http://validator.w3.org/check?uri=referer"> [xhtml] </a>
|
|
.
|
|
<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3"> [css] </a>
|
|
.
|
|
<a href="http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/fr/blog/feed/feed.xml">[rss]</a>
|
|
</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</body>
|
|
</html> |