2012-02-02 13:07:26 +00:00
<?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" / >
2012-04-02 21:43:39 +00:00
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/solarized.css" / >
2012-02-02 13:07:26 +00:00
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
2012-05-02 15:43:56 +00:00
< link href = 'http://fonts.googleapis.com/css?family=Inconsolata' rel = 'stylesheet' type = 'text/css' >
2012-02-02 13:07:26 +00:00
< 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 >
2012-05-02 15:43:56 +00:00
< script type = "text/javascript" src = "/Scratch/js/highlight/highlight.pack.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/article.js" > < / script >
2012-02-02 13:07:26 +00:00
<!-- [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" > / / < ! [ C D A T A [
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" >
2012-05-02 15:43:56 +00:00
< 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 >
2012-02-02 13:07:26 +00:00
< 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 >
2012-05-02 15:43:56 +00:00
< p > «Nous ne somme pas obligé d’
Nous pouvons créer un web avec une meilleure typographie aujourd’ < / p >
2012-02-02 13:07:26 +00:00
< / blockquote >
2012-05-02 15:43:56 +00:00
< p > Comme quelqu’ ’ < em > ligatures< / em > , je crois que c’ < / p >
2012-02-02 13:07:26 +00:00
2012-05-02 15:43:56 +00:00
< p > J’
Cependant je n’ :< / p >
2012-02-02 13:07:26 +00:00
2012-05-02 15:43:56 +00:00
< p > Tout d’ ’ ’ ?< / p >
2012-02-02 13:07:26 +00:00
2012-05-02 15:43:56 +00:00
< p > < img alt = "A ligature example" src = "/Scratch/img/blog/Typography-and-the-Web/ligatures.png" / > ;< / p >
2012-02-02 13:07:26 +00:00
< p > Quel est le problème des ligatures sur le web ?
2012-05-02 15:43:56 +00:00
Le premier c’ < / p >
2012-02-02 13:07:26 +00:00
< 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 >
2012-05-02 15:43:56 +00:00
< p > Le second problème est le rendu. Par exemple, essayer d’ :< / p >
2012-02-02 13:07:26 +00:00
< 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 >
2012-05-02 15:43:56 +00:00
< p > Voici une capture d’ :< / p >
2012-02-02 13:07:26 +00:00
2012-05-02 15:43:56 +00:00
< 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 >
2012-02-02 13:07:26 +00:00
2012-05-02 15:43:56 +00:00
< 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’
Et une part du problème est que l’ ’ < span class = "sc" > css< / span > .< / p >
2012-02-02 13:07:26 +00:00
< 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 >
2012-05-02 15:43:56 +00:00
< p > < img alt = "LaTeX screenshot" src = "/Scratch/img/blog/Typography-and-the-Web/first_latex_screenshot.png" / > ;< / p >
2012-02-02 13:07:26 +00:00
2012-05-02 15:43:56 +00:00
< 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’ :< / p >
2012-02-02 13:07:26 +00:00
2012-05-02 15:43:56 +00:00
< pre > < code class = "latex" > \item first
\item {\sc first}
< / code > < / pre >
2012-02-02 13:07:26 +00:00
< 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 >
2012-05-02 15:43:56 +00:00
< p > La ligature “< span style = "color:#800" > st< / span > ” est rare et n’ < 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 >
2012-02-02 13:07:26 +00:00
2012-05-02 15:43:56 +00:00
< p > < img alt = "XeLaTeX ligatures" src = "/Scratch/img/blog/Typography-and-the-Web/xelatex_ligatures.jpg" / > ;< / p >
2012-02-02 13:07:26 +00:00
2012-05-02 15:43:56 +00:00
< p > J’ ’ < a href = "http://nitens.org/taraborelli/latex#rare" > Dario Taraborelli< / a > .< / p >
2012-02-02 13:07:26 +00:00
< 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 >
2012-05-02 15:43:56 +00:00
< li > Le mot courant contient un caractère de ligature, je ne dois pas chercher d’ < / li >
< li > La fonte n’ ’ < / li >
2012-02-02 13:07:26 +00:00
< li > Une commande javascript a modifé le CSS, je dois vérifier si je dois remplacer les ligatures par les deux caractères.< / li >
2012-05-02 15:43:56 +00:00
< li > etc…< / li >
2012-02-02 13:07:26 +00:00
< / ul >
2012-05-02 15:43:56 +00:00
< p > Dans tous les cas, si quelqu’ !< / p >
2012-02-02 13:07:26 +00:00
< / div >
2012-04-10 13:56:34 +00:00
< div id = "social" >
< div class = "left" > < a href = "https://twitter.com/share" class = "twitter-share-button" data-via = "yogsototh" > Tweet< / a >
< script > ! function ( d , s , id ) { var js , fjs = d . getElementsByTagName ( s ) [ 0 ] ; if ( ! d . getElementById ( id ) ) { js = d . createElement ( s ) ; js . id = id ; js . src = "//platform.twitter.com/widgets.js" ; fjs . parentNode . insertBefore ( js , fjs ) ; } } ( document , "script" , "twitter-wjs" ) ; < / script >
< / div >
< div class = "left" > < div class = "g-plusone" data-size = "medium" data-annotation = "inline" data-width = "106" > < / div >
< script type = "text/javascript" >
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
< / script >
< / div >
< div class = "flush" > < / div >
< / div >
2012-02-02 13:07:26 +00:00
< 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();
}
2012-04-10 13:56:34 +00:00
document.write('< div id = "clickcomment" > Commentaires & Partage< / div > ');
2012-02-02 13:07:26 +00:00
< / script >
< div class = "flush" > < / div >
2012-04-10 13:56:34 +00:00
2012-02-02 13:07:26 +00:00
< 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
2012-02-29 21:06:22 +00:00
< div class = "next_article" >
< a href = "/Scratch/fr/blog/Haskell-the-Hard-Way/" > Haskell comme un vrai! < span class = "nicer" > »< / span > < / a >
< / div >
2012-02-02 13:07:26 +00:00
< / div >
< div class = "flush" > < / div >
< / div >
< / div >
< div id = "bottom" >
2012-04-02 21:43:39 +00:00
< div >
2012-04-10 13:56:34 +00:00
< a href = "https://twitter.com/yogsototh" > Follow @yogsototh< / a >
2012-04-02 21:43:39 +00:00
< / div >
2012-02-02 13:07:26 +00:00
< 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
2012-05-02 15:43:56 +00:00
modifié le : 26/04/2012
2012-02-02 13:07:26 +00:00
< / 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 >
< div class = "clear" > < / div >
< / div >
< / body >
< / html >
