L’odyssée de l’espace insécable

La micro-typographie sur le web

Ceci n’est pas une conférence sur le cyclimse.

@damienalexandre

Damien Alexandre

Je suis développeur ಠ_ಠ

JoliCode

Conseil, réalisation, audit, expertise et formation

…Poney, Guinness et gif animé.

Micro-typographie

De quoi on parle ?

Macro VS Micro-typographie

Ah non attention, si vraiment tu veux te rappeler des souvenirs de ton perroquet, c’est un très, très gros travail et parfois c’est bon parfois c’est pas bon. Ça respire le meuble de Provence, hein ?

Quand tu fais le calcul, là on voit qu’on a beaucoup à travailler sur nous-mêmes car c’est juste une question d’awareness et parfois c’est bon parfois c’est pas bon. Il y a un an, je t’aurais parlé de mes muscles.

Je me souviens en fait, tu vois au passage qu’il n’y a rien de concret car en vérité, la vérité, il n’y a pas de vérité et cela même si les gens ne le savent pas ! Tu vas te dire : J’aurais jamais cru que le karaté guy pouvait parler comme ça !

Je me souviens en fait, premièrement, le cycle du cosmos dans la vie… c’est une grande roue et je ne cherche pas ici à mettre un point ! C’est cette année que j’ai eu la révélation !

Si je t’emmerde, tu me le dis, si vraiment tu veux te rappeler des souvenirs de ton perroquet, on est tous capables de donner des informations à chacun et ça, c’est très dur, et, et, et… c’est très facile en même temps. Et tu as envie de le dire au monde entier, including yourself.

Tu␣vas␣te␣dire⍽:␣ J’aurais␣jamais␣cru␣ que␣le␣karaté␣ guy␣pouvait␣parler␣ comme␣ça⍽!

Les règles de micro-typographie sont listées dans des

Codes Typographiques

Avertissement

Un code n’est pas une loi. Les codes se contredisent parfois, et nous trouverons toujours à chipoter.

Keep calm and stop trolling

Codes typographiques

Capitale, italique, nombre, abréviation, ponctuation, césure…

Lexique des règles typographiques en usage à l’Imprimerie nationale

ISBN : 9782743304829

Abrégé du code typographique à l'usage de la presse

ISBN : 9782351130667

L’espace

Ce bordel inter-galactique

Quelques uns des espaces disponibles

  • Espace d’idéogramme ;
  • Espace largeur de figure ;
  • Espace braille ;
  • Espace Tiers d’Em ;
  • Espace largeur de ponctuation ;
  • Espace standard ;
  • NBSP: Espace insécable ;
  • Espace maigre ;
  • NNBSP: Espace maigre insécable ;
  • Espace fin ;
  • MMSP: Espace mathématique ;
  • […] (il y en a plein d’autres).

Quelques uns des espaces disponibles

  • Espace d’idéogramme ;
  • Espace largeur de figure ;
  • Espace braille ;
  • Espace Tiers d’Em ;
  • Espace largeur de ponctuation ;
  • Espace standard ;
  • NBSP: Espace insécable ;
  • Espace maigre ;
  • NNBSP: Espace maigre insécable ;
  • Espace fin ;
  • MMSP: Espace mathématique ;
  • […] (il y en a plein d’autres).

L’espace insécable

  • Pour éviter les retours à la ligne ;
  • Fonctionne partout ;
  •   ;
  • Facile à saisir (pas d’excuse).

Windows Alt+0160 Apple MacOSX Option (Alt)+Espace
Linux AltGr+Maj+Espace

Insère-moi ici

  • Devant⍽: mais pas après ;
  • à l’intérieur des «⍽guillemets français⍽» ;
  • facile à automatiser.

L’espace fine insécable

  • Non supporté par Windows XP ;
  • on s’en fout de Windows XP ;
  • doit être disponible dans la police ;
  • quart cadratin insécable pour les intimes.

Windows Alt +202F Apple MacOSX ☹
Linux ☹

Les petits hacks

<span style="font-size:0.5em;">&nbsp;</span>

<span style="white-space:nowrap">&thinsp;</span>

Bonjour 1998. Dancing baby

UTF-8 et automatisation

  • Utilisez &#8239; ;
  • faites faire le boulot par un outil ;
  • ayez l’espace dans votre fonte.

Où l’utiliser ?

  • Devant⍽; le point-virgule ;
  • devant⍽! le point d’exclamation ;
  • devant⍽? le point d’interrogation.

L’apostrophe typographique

  • N’est pas sur votre clavier ;
  • est un des caractères les plus mal traités DU MONDE ;
  • est facile à saisir !

Windows Alt + 0146 Apple MacOSX ⌥ Opt + Shift + ]
Linux AltGr + Shift + B

Comment la reconnaître

C’est une virgule en position haute !

Apostrophes

Où la placer ?

  • Partout ;
  • bannir l’apostrophe droite ;
  • facile à automatiser.

Plein d’autres

  • Césures ;
  • « guillemets » ;
  • tirets ;
  • points de suspension ;
  • …

OMG pas de temps 😱

Les outils

Word

Fichier -> Exporter en HTML.

(╯°□°）╯︵ ┻━┻

Les outils

  • Un bon CMS (Spip, Dotclear) ;
  • Smartypants ;
  • Smartypants Typographer ;
  • htmLawed ;
  • textwheel ;
  • Texy ;
  • Typesetter.js ;
  • Lexentity.

Où alors, des claviers BEPO pour tout le monde !

Introducing JoliTypo

  • Ellipses, césures, guillemets, tirets, apostrophes, espaces… ;
  • Multi-locale ;
  • Robuste ;
  • Encore en Alpha (contributeurs bienvenus) ;
  • En PHP (dsl) et sous MIT ;
  • Plein de tests unitaires ;
  • Ne corrige pas l’orthographe ☹ ;
  • https://github.com/jolicode/JoliTypo
Love you all!

@damienalexandre
coucou@jolicode.com

http://jolicode.github.io/typography-conf