Ponctuation et CSS content

Copyright : Emily Mathews

La propriété content en CSS permet d’afficher du texte en CSS pour bien des navigateurs. Cette propriété est d’ailleurs plutôt bien supportée, car même Internet Explorer 8 est en mesure de la comprendre. Bon, Internet Explorer 7 ne comprend pas cette propriété, mais comme dirait Uma Turman pour Schweppes "Hey, what did you expect ?". :)

Seulement voilà, on peut parfois se retrouver bien embêté à l’utilisation de cette propriété content, car certains caractères, liés à la ponctuation, ne sont pas correctement encodés directement dans les feuilles de style. Il faut en réalité utiliser la valeur Unicode de ces caractères si l’on souhaite les voir s’afficher avec les sélecteurs :before et :after. Les valeurs Unicode commencent toujours par un antislash.

Je vous propose aujourd’hui un tableau, non exhaustif, de caractères liés à la typographie et la ponctuation, telle qu’elles sont connues par les littéraires.

Symb. HTML ASCII Description CSS content
" " " Guillemet double \0022
& & & Esperluette \0026
< &lt; &#60; Signe inférieur \003c
> &gt; &#62; Signe supérieur \003e
  &nbsp; &#160; Espace insécable \00a0
« &laquo; &#171; Guillemet gauche \00ab
» &raquo; &#187; Guillemet droit \00bb
&ensp; &#8194; Espace demi-cadratin \2002
&emsp; &#8195; Espace cadratin \2003
&thinsp; &#8201; Espace maigre \2009
&zwnj; &#8204; Antiliant sans chasse \200C
&zwj; &#8205; Liant sans chasse \200D
&lrm; &#8206; Marque gauche-à-droite \200E
&rlm; &#8207; Marque droite-à-gauche \200F
&ndash; &#8211; Tiret demi-cadratin \2013
&mdash; &#8212; Tiret cadratin \2014
&lsquo; &#8216; Guillemet-apostrophe culbuté \2018
&rsquo; &#8217; Guillemet-apostrophe \2019
&sbquo; &#8218; Guillemet-virgule inférieur \201A
&ldquo; &#8220; Guillemet-apostrophe double culbuté \201C
&rdquo; &#8221; Guillemet-apostrophe double \201D
&bdquo; &#8222; Guillemet-virgule double inférieur \201E
&#8223; Guillemet-virgule double supérieur culbuté \201F
&dagger; &#8224; Obèle \2020
&Dagger; &#8225; Double obèle \2021
&bull; &#8226; Gros point médian \2022
&hellip; &#8230; Points de suspension \2026
&permil; &#8240; Pour mille \2030
&prime; &#8242; Prime \2032
&Prime; &#8243; Double prime \2033
&lsaquo; &#8249; Guillemet simple vers la gauche \2039
&rsaquo; &#8250; Guillemet simple vers la droite \203A

Une police d’icônes de réseaux sociaux

Copyright : DRiNCHEV

Je viens de tomber sur le lien utile du jour : une police entièrement faite d’icônes de réseaux sociaux. Ça pourrait vous sembler être une idée farfelue, ou alors un lien simplement utile pour les graphistes. Mais grâce à la propriété font-face en CSS, un panel de possibilités s’ouvre également aux développeurs.

Quoi qu’il en soit, profitez ici de la Mono Social Icons Font. Celle-ci propose un grand nombre de réseaux sociaux représentés : 500px, Amazon, AOL, Apple, Behance, Bing, Blogger, Delicious, Deviantart, Ebay, Facebook, Google +, Grooveshark, iTunes, LinkedIn, MSN, Soundcloud, Twitter, et bien d’autres encore ! Et avec Mono Social Icons, il est aussi possible de profiter de toutes ces icônes sous la forme d’un carré et d’un cercle.

Les avantages d’une police pour les icônes

Utiliser une police pour les icônes, ou tout autre petite image telle qu’un logo par exemple, possède certains atouts indéniables. L’un des premiers avantages qui me vient à l’esprit est la légèreté de la solution. Quand on pense à l’optimisation d’un site, on s’inquiète forcément du poids des pages que l’on construit. Utiliser une police peut s’avérer être une solution plus souple que l’ajout d’un certain nombre d’images pour chacun des réseaux sociaux, ou d’un sprite (selon la taille de ce sprite).

Utiliser une police d’icônes permet également d’éviter la pixellisation d’une image sur écran mobile. En effet, de nos jours, une page sur le web est amenée à être consultée sur un nombre indéfini de terminaux. Il existe des smartphones de toutes dimensions, et des marques de mobiles à ne plus savoir compter ! L’avantage de l’utilisation d’une police est d’obtenir des icônes parfaitement optimisées pour les différents supports. J’ai largement pu observer cette pratique sur l’un des mes anciens projets professionnels.

Aussi, l’utilisation d’une police permet aussi de rapidement pouvoir modifier les images : changer la couleur d’un pictogramme, en modifier sa taille ou encore y ajouter de l’ombre, des effets sur les contours, ou même en faire des dégradés. On pourrait imaginer un certain nombre d’actions complètement folles sur ces implémentations grâce au langage CSS ! On peut changer l’opacité de ces icônes.

Et enfin, on peut générer des comportements à l’infini à ces icônes. On peut avoir un comportement pour le survol de l’image, pour le focus, encore ajouter des fonds colorés à tout moment. Utiliser une police d’icônes est définitivement une bonne pratique !

Quelques précautions à prendre cependant…

Si vous souhaitez utiliser une icône à l’aide de caractères définis dans une police en CSS, n’oubliez pas de prendre en considération les robots des moteurs de recherche. Imaginons par exemple que vous utilisiez une police pour générer le logo de votre site, et que vous y ajoutiez un lien. Sachez que les caractères choisis pour ce logo seront ceux sur lesquels seront référencés le nom de votre site. En se basant sur cet exemple, vous comprendrez aisément qu’il faut choisir avec parcimonie quelles icônes seront remplacées, et surtout comment.

Et, il faut aussi penser à la compatibilité des navigateurs. Le support de la propriété font-face est total pour Internet Explorer à partir de la version 9, bien que certaines utilisations soient possibles déjà pour la version 8 de ce navigateur. Il faut totalement oublier webOS et Opera Mini. Bon, vous me direz que ça va compte tenu des navigateurs que j’énonce, mais tout dépendra du trafic que vous ciblez. Tenez-vous au courant de ces évolutions, et surtout prévoyez, si besoin est, des solutions pour les autres navigateurs.

Les 24 termes solaires chinois selon Oamul

Copyright : Wikimedia

En Chine, on appelle un terme solaire un point précis sur le calendrier lunaire solaire asiatique traditionnel correspondant souvent à un phénomène naturel précis. En effet, un calendrier chinois prend également en considération la révolution de la Terre autour du Soleil et le mouvement de la Lune autour de la Terre. Une année chinoise se découpe donc en 24 termes solaires, le premier étant 立春, Lìchūn en pinyin (le début du printemps) et le dernier étant 大寒, Dàhán (le grand froid).

Oamul, illustrateur et animateur d’origine chinoise reconnu, nous propose sa propre version des 24 termes solaires. En plus de nous offrir des images aux tons doux, ce dessinateur en fait des GIFs possédant de manière calligraphiée les caractères chinois correspondant à chacun des termes solaires. Je vous invite donc à découvrir ces images ci-dessous, et à parcourir le portfolio d’Oamul.

立春 Lìchūn

雨水 Yǔshuǐ

惊蛰 Jīngzhí

春分 Chūnfēn

清明 Qīngmíng

谷雨 Gǔyǔ

立夏 Lìxià

小满 Xiǎomǎn

芒种 Mángzhòng

夏至 Xiàzhì

小暑 Xiǎoshǔ

大暑 Dàshǔ

立秋 Lìqiū

处暑 Chǔshǔ

白露 Báilù

秋分 Qiūfēn

寒露 Hánlù

霜降 Shuāngjiàng

立冬 Lìdōng

小雪 Xiǎoxuě

大雪 Dàxuě

冬至 Dōngzhì

小寒 Xiǎohán

大寒 Dàhán

Refonte graphique : une identité visuelle

Copyright : Gemma Evans

Enfin, afin de réaliser une bonne refonte graphique, il est important de bien identifier ce qui fait l’identité visuelle de votre site. Tous les éléments visibles de votre marque, liée à votre activité, comme les couleurs, les formes, l’apparence finale de votre structure actuelle graphique forment l’identité de votre marque : ce par quoi elle est reconnaissable d’entre mille.

Perfectionner son identité visuelle

Pour éviter de complètement désorienter l’internaute, il faut tenter de garder certaines pratiques de l’ancien site. Il peut s’agir des couleurs, de l’environnement graphique ou simplement d’un plan de site assez similaire. L’univers graphique, quoique amélioré, doit posséder quelques similitudes avec l’ancienne interface du site. C’est une bonne pratique pour permettre à l’utilisateur de rapidement se retrouver dans un endroit qui lui semblera familier. L’idée est de lui fournir un espace aussi agréable qu’usuel.

Les anciennes versions de Facebook proposaient déjà des déclinaisons de charte graphique à partir du fameux bleu #44619D : ainsi, changer cette couleur reviendrait à bouleverser les habitudes des utilisateurs de ce réseau social. Cet ensemble de couleurs se retrouve à chaque nouvelle version du site. Bien évidemment, l’interface est sans cesse revisitée et les teintes ne sont pas exactement les mêmes, les icônes changent, etc., mais une certaine linéarité persiste. Facebook s’est créé une véritable identité. Et les lecteurs habitués restent capables d’avoir un usage optimal de l’interface.

Avant/Après d'une page sur Facebook

Décider de l’évolution du logo

La question de l’évolution du logo peut devenir essentielle. On peut choisir de le faire évoluer lors d’une refonte pour en modifier le message ou pour sublimer sa simplicité. On peut en contre-partie choisir de le conserver pour transmettre les mêmes valeurs au nouveau design créé. Dans tous les cas, il convient de réfléchir à ce qu’apporte le logo actuel et à ce qu’une évolution de celui-ci pourrait apporter. Encore une fois, l’idée n’est pas de bouleverser totalement le design de la marque : cela pourra donner l’impression qu’il s’agit d’une nouvelle entité et ce n’est absolument pas le but recherché par les graphistes.

Il faut faire une étude de l’existant et du contexte dans lequel évolue le logo avant de décider de totalement le modifier : Starbucks, par exemple, a au fil des années proposé un logo assez proche du précédent pour aujourd’hui lui préférer une version totalement épurée.

Evolution du logo Starbucks

Plusieurs questions interviennent au cours de l’élaboration d’une refonte comme le précise l’excellent article Art Direction and Design écrit par Dan Mall figurant sur le site A List Apart : Est-ce-que les couleurs choisies s’adaptent correctement à la marque ? Est-ce-que les couleurs choisies vont bien ensemble, ne créent-elles pas un sentiment d’inconfort au lecteur ? N’est-il pas préférable de privilégier des couleurs web-safe ? — Les couleurs dites web-safe constituent une palette des 216 couleurs ayant la même apparence quel que soit l’ordinateur ou le système d’exploitation de l’internaute.

Mettre en place une véritable structure typographique

D’un point de vue typographique, on peut laisser libre court à toutes les fantaisies mais il apparaît essentiel de favoriser la facilité de lecture. La police choisie ne doit pas fatiguer l’œil du visiteur et doit convenir à tous types d’âges et de visions.

De manière générale, dans le monde du web, on opte donc pour une police traditionnelle pour le texte global telle que les polices Arial, Tahoma, Verdana, Helvetica, etc. Ces polices sont dites sans-serif. Une police sans-serif est une police qui ne possède pas de sérifs, comme son nom l’indique. Les sérifs sont les petites césures situées à la fin des contours des lettres en typographie. Les polices sans-serif procurent à un texte son caractère neutre. C’est d’ailleurs la raison pour laquelle elles sont généralement utilisées pour le corps de texte. Elles ont aussi l’avantage de garantir une apparence similaire quelle que soit la résolution de l’écran de l’internaute.

Pour les titres, les citations ou les emphases, d’autres familles de polices apparaissent : semi-serifs, monospaced, script, etc.. Elles sont alors complètement soumises au choix du designer : l’empattement typographique n’est alors plus pris en compte.

Un autre point à ne pas négliger : lorsqu’il s’agit de polices complètement originales telles que les polices Museo Slab ou Capsuula en guise d’illustrations, il faut savoir que pour permettre à tous les internautes d’apprécier la lecture des caractères, il faut absolument "installées" ces polices. On utilise alors l’attribut @font-face en CSS afin qu’elles soient rendues disponibles pour les ordinateurs qui n’en sont pas équipés. Cette installation nécessite plusieurs types de fichiers (TrueType .ttf, OpenType .oft, Embedded OpenType .eot pour Internet Explorer et/ou Scalable Vector Graphics .svg). Et surtout, il n’est pas recommandé de faire un usage trop important de ces polices originales, car plus celles-ci seront nombreuses, plus le chargement des pages pour l’utilisateur d’un site sera long.

La césure typographique en CSS

Copyright : Ken Zirkel

On y pense rarement, et pourtant, la césure, autrement dit la coupure de mots dans un texte, aussi hyphens en anglais, est un procédé typographique très courant. Dans le monde du web, rares sont les sites qui mettent en œuvre cette pratique : certains ne reconnaissent pas les avantages de la césure, d’autres ne sont tout simplement pas au courant de la possibilité d’une telle pratique. Quoi qu’il en soit, j’ai décidé aujourd’hui de vous proposer un petit exemple concret de l’utilisation de cette propriété en CSS.

Règles de typographie

Afin de fournir aux lecteurs d’un texte un confort optimal, certaines règles de typographie ont été mises en place de manière standard. Ainsi, on apprend que la césure dans un texte est avant tout préconisée dans le but d’améliorer les espacements entre les mots. Ainsi, que le texte possède un alignement justifié, ou que celui soit classiquement aligné à gauche, la césure lui permet d’avoir des paragraphes plus ou moins uniformes visuellement parlant.

Il existe également plusieurs méthodes de bien intégrer cette césure, celles-ci varient selon la langue utilisée pour un texte. En français, comme anglais, la coupure des mots intervient à l’aide d’un tiret en fin de ligne. (En espagnol catalan, un point médian est ajouté devant ce tiret par exemple.) Et un mot est systématiquement coupé à la fin d’une syllable. Aussi, de façons à ce que la césure reste élégante, la césure est préférée lorsqu’elle n’intervient pas sur trois lignes à la suite, ni sur les noms propres. Sur le web, on pourrait ainsi contrer certains de ces effets non désirés en ajoutant un espace insécable &nbsp; devant les mots posant un éventuel souci. Enfin, on ne coupe pas un mot de moins de quatre lettres, et on ne laisse pas un demi-mot seul sur une ligne.

En CSS, c’est grâce à la propriété hyphens que nous pouvons apporter à un texte ces mêmes notions typographiques.

Utilisation de la propriété hyphens en CSS

Afin d’utiliser de manière optimale hyphens pour la césure dans un texte, je vous propose le bout de code suivant. Celui est compatible un nombre de navigateurs important, bien que Chrome ne soit pas compté parmi eux.

.hyphen {
// "word-break" renseigne sur la manière dont être effectuée la césure.
// "break-all" signifie que celle-ci peuvt être insérée entre chaque caractère.
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
// Le préfixe -webkit- est utilisé pour Safari.
// Chrome ne supporte pas la propriété "hyphens" à l'heure actuelle.
-webkit-hyphens: auto;
// Le préfixe -moz- est utilisé pour Firefox.
-moz-hyphens: auto;
// La propriété "hyphens" est reconnue sur Internet Explorer
// avec le préfixe -ms- à partir de la version 10 du navigateur.
-ms-hyphens: auto;
// "hyphens" utilisé de la manière la plus classique qu'il soit.
hyphens: auto;
}

Et en CSS4, ça donnera quoi ?

Dans un futur, très proche je l’espère, il sera possible d’améliorer encore l’utilisation d’hyphens dans les feuilles de style. Avec CSS Text Level 4, de nouvelles propriétés apparaîtront et il sera alors possible de réellement gérer toutes ces règles typographiques que je vous ai énoncé au début de l’article.

La première de ces propriétés est hyphenate-limit-chars – rajoutez les préfixes -ms-, -moz- et -webkit- pour en obtenir toutes ses déclinaisons. Grâce à celle-ci, il sera possible de préciser le nombre de caractères minimal pour un mot sur lequel on veut appliquer une césure, ainsi que les nombres de caractères minimaux avant et après la césure. Ce n’est pas encore clair pour vous ? :) Prenons l’exemple situé ci-dessous. Par défaut, un mot pourra être coupé s’il possède au minimum 5 caractères. De manière générale, comme je vous le disais, les mots de moins de quatre lettres ne sont pas coupés. Mais vous pourriez avoir envie que votre mot comporte au minimum 7 lettres pour l’application d’une césure, c’est donc la valeur de ce premier chiffre que vous modifierez. Toujours dans l’exemple ci-dessus, il faut qu’il y ait au minimum deux lettres avant la césure, et deux lettres après la césure. 5 2 2 est la valeur par défaut de cette propriété. Il suffirait donc ici d’utiliser le mot-clé auto comme valeur.

hyphenate-limit-chars: 5 2 2;

Avec hyphenate-limit-lines, il sera désormais possible de spécifier un nombre de lignes maximale sur lesquelles pourra être appliquer une césure de manière consécutive. Comme je vous le disais plus tôt, en typographie, il est préconisé qu’il n’y ait pas trois lignes consécutives avec une césure. Pour respecter cette règle, nous pourrons utiliser cette nouvelle propriété de la manière suivante :

hyphenate-limit-lines: 2;

Enfin, la troisième propriété qui nous permettra d’affiner la qualité de césure est hyphenate-limit-zone. Celle-ci définiera (en pourcentage ou en unité de mesure telle que le pixel ou l’em) la largeur de la zone sur laquelle sera appliquer la césure. Ainsi, il sera possible de limiter à 40 pixels, par exemple, la zone sur laquelle on autorise la coupure des mots dans un bloc.

hyphenate-limit-zone: 40px;

La propriété hyphenate-character vous permettra de définir exactement quel caractère est à utiliser pour la césure des mots. Par défaut, c’est donc un tiret (-) qui est ajouté. Mais ici, vous aurez la possibilité de définir ce qui vous fera envie. Une propriété à utiliser en connaissance de cause je suppose, car pour donner un confort optimal à la lecture, il ne faudrait pas devenir trop fantaisiste. A noter que définir le caractère, il vous faudra utiliser sa correspondance ISO : voir le tableau suivant.

// Dans l'exemple suivant, j'utilise le caractère → pour la césure.
hyphenate-character: "\2192";

Enfin, hyphenate-limit-last, qui admet comme valeurs les mots-clé suivants none, always, column, page et spread, indique le comportement de la césure à la fin des éléments, des pages, des colonnes, etc.. Je vous encourage à lire la documentation complète (en anglais) sur la coupure des mots, the hyphenation, sur dev.w3.org. Celle-ci vous permettra de mieux appréhender les nouveautés liées à la césure en CSS.

Pour finir cet article, je vous encourage également à vous reporter au très bon tableau évolutif de Can I Use concernant la propriété hyphens. Cela vous permettra de savoir sur quels navigateurs cette propriété est prise en compte, et quelles solutions vous pouvez tenter de mettre en place pour contrer les effetx indésirables.

Alex Gopher, The Child

Copyright : Miguel Udaondo

The Child est une animation faisant appel à la motion typography que j’ai découverte en cours de "Poésies Numériques". La Motion Typography — aussi appelée par les anglophones kinetic typography, que l’on pourrait traduire par typographie cinétique en français — est une technique d’animation consistant à introduire des textes en mouvement. Ces derniers sont souvent accompagnés d’éléments sonores qui complètent la signification des mots utilisés dans l’animation. Contrairement à un texte écrit de manière conventionnelle, c.-à-d. horizontalement, la motion typography emmène le spectateur à être attentif aux mouvements, aux couleurs et aux formes représentées des mots. Il faut savoir qu’aucun élément n’est laissé au hasard dans ce type d’animations et que, chacune des mises en forme appliquées possède alors, une définition qui lui est propre.

Cette animation, que je vous présente aujourd’hui, a été créée en 1999 par le collectif H5. H5 est une entreprise française fondée en 1996, qui s’ancre dans la création graphique. Elle est à l’origine de clips dont Special Cases de Massive Attack, Remind Me de Royksöpp ou Twist de Goldfrapp ; et d’annonces publicitaires pour Citroën, Audi, Volkswagen, Areva, Dior, Hermès, Hugo Boss et j’en passe… En 2009, c’est cette même société qui réalise le court-métrage Logorama, l’Oscar 2010 du meilleur court-métrage d’animation. The Child est le tout premier clip de la société et a été produit par Le Village.

Le scénario de cette animation est simple. Il met en oeuvre par des procédés typographiques des futurs parents prêts à accueillir leur enfant. La scène démarre dans un building de la ville de New York. Le couple est installé dans le salon de leur appartement. La femme enceinte (PREGNANT) est une jolie (PRETTY) brune (BROWN HAIR), habillée d’une robe rouge (RED DRESS) et d’espadrilles (SNEAKERS). Elle est assise sur son canapé (SOFA), à proximité de son mari. Celui-ci est un petit homme (LITTLE MAN) qui porte de grosses lunettes (BIG GLASSES). Il est habillé d’un costume noir (DARK SUIT) et de chaussures italiennes (ITALIAN SHOES). Cette description très imagée nous est fournie par les qualificatifs attribués à chaque personnage. Le mari qui jusqu’alors était d’humeur agréable (PLEASANT FACE), devient anxieux (ANXIOUS FACE) lorsque sa femme lui dit que le bébé arrive. Ensemble, ils se précipitent dans la rue et interpellent un TAXI. Le chauffeur du taxi comprend que le couple est pressé, et donc, tout au long de son itinéraire, il tentera de se faufiler entre les voitures à toute vitesse. Ainsi, nos 3 protagonistes traversent le pont de Brooklyn. Puis, créent un carambolage. Des policiers (SPEED COPS) se lancent alors à la poursuite du taxi, en vain. Ce dernier arrive à l’hôpital à temps, et la femme met au monde son enfant. L’animation se termine sur cette phrase : « Congratulations Mr Gopher, it’s a boy ! ».

D’un point de vue technique, plusieurs systèmes sémiotiques ont été mis en place pour cette animation. Tout d’abord, on est en présence d’un système plastique des couleurs qui crée l’ambiance et le dynamisme de l’animation. Le système iconique (composé essentiellement de calligrammes) construit les acteurs du décor et la narration de l’histoire. Un système linguistique est perceptible de par sa grammaire, et un système temporel qui va jouer un rôle de délimitation spatiale et donner le rythme de la narration. Enfin, un système sonore, qui vient compléter la narration.
Bien évidemment, les mouvements utilisés ne sont pas quelconques. Dans le visuel, on observe que les trajectoires ont un but défini. Elles sont synonymes d’apparitions progressives, de trajectoires du grand vers l’infiniment petit (sans idée de disparition), de changements de position à vitesse égale… Je vais m’arrêter ici :) En bref, bon film!