L'essentiel du HTML5

Définir les espaces et autres règles typographiques

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Apprenez à définir globalement les espaces et quelques autres règles typographiques. Vous allez pouvoir répondre à un grand nombre de vos besoins.
06:28

Transcription

Alors si vous souhaitez poursuivre l'aventure d’intégration de règles typographiques au sein de vos contenus, sachez qu'il existe trois familles principales de caractères, qui sont complètement sous-employées, au niveau du HTML aujourd'hui. Ce sont l'espace, les traits d'union les tirets et les guillemets. Alors commençons par l'espace, ici si je tape la lettre « z » par exemple que je mets un mot, toute une série d'espaces entre ce mot et une autre série de caractères, vous allez voir qu'il y a un seul espace qui est pris en compte. La seule façon de pouvoir représenter plusieurs espaces serait d'utiliser l’entité HTML, qui caractérise cet espace, c'est à dire « &NBSP », pour Non Breakable Space. Et là si vous copiez autant de fois que vous voulez ce caractère-là, vous allez pouvoir insérer autant de caractères, que vous souhaitez, puisque là, ça devient du caractère explicite. C'est plus du caractère implicite, comme de l'espace, qui serait pris en compte par simplement la barre d'espace. Alors nous allons voir par cette petite mise en pratique, ici les différentes familles ou différentes manières de représenter l'espace en HTML. Alors ici on va utiliser une balise « span » avec deux caractères pareils, deux caractères droits, qui vont pouvoir matérialiser par ces CSS, ici de couleur orange et d'affichage block ici, la valeur de l'espace, en fonction du caractère utilisé. Donc, si j'utilise un caractère simplement la barre d'espace, un caractère espace implicite, on va dire : ici on se retrouve avec cet espace-là. Si j’utilise le caractère « &NBSP », ici. On a exactement la même largeur de caractère, voyez la même distance entre les deux pipes sauf que cette fois-ci on vient d'utiliser ce qu'on appelle un Non Breakable Space, un espace insécable. Alors on reviendra sur cette notion juste après. Il existe aussi le caractère « 8234 » qui est une entité numérique qui est en fait un caractère un peu particulier qui est pas pris en compte par tous les navigateurs, et vous voyez aussi sa largeur n'est pas tout a fait équivalente au Non Breakable Space. Ensuite on a le caractère « &thinsp », alors ce caractère-là, il est encore plus petit, voyez en fait il correspond à un quart cadratin. Il faut savoir que l'unité de mesure à caractère c'est le cadratin, qui vaut en gros la taille de la font utilisée, dont le corps de la font, pour une font de douze, par exemple un cadratin voudra douze. Donc ici on est à la valeur d'un quart de cadratin, on a également le demi-cadratin « ENSP » et le cadratin entier qui est le « EMSP ». Tout ça sont des espaces qui vont pouvoir être utilisés et avoir une notion ou non, de sécabilité c'est à dire de pouvoir se couper, de pouvoir se scinder, pour un retour à la ligne. Alors encore une fois mettons-le en exemple ici, je vais commenter cette partie-là et rajoutons exactement la même construction, mais cette fois ci en mettant du texte, devant et surtout après l'espace. Alors ici on va regarder en faisant varier cette largeur, quoi que le plus simple, c'est quand même de l'envoyer dans un navigateur. Et puis surtout de commenter différemment les CSS, en demandant cette fois-ci de surligner en orange l'espace lui-même, en fait toute la valeur de l'espace pour voir justement sa sécabilité ou pas. Alors j'enregistre ici et on charge dans un navigateur. Alors le premier à être affecté ici va être le « NBSP », théoriquement regardez « NBSP », il part à la ligne, il ne se scinde pas. Si je regarde l'autre caractère, comme l'espace tout court, voyez l'espace tout court se scinde lui, donc il est sécable, donc la césure va pouvoir faire à ce niveau-là. Alors qu'au niveau du « NBSP » il n'y a pas de césures qui peuvent se faire. Donc en fonction du caractère que vous allez utiliser, ce qui est important aussi de regarder c'est sa sécabilité. En ce qui concerne les traits, les petits tirets, en fait là je vais utiliser une grille d'arrière plan qui fait 50 pixels, de carré de grille, correspondant à la taille de la typo et à la hauteur de ligne. Et on utilise la même alchimie que tout à l'heure, avec les « spans » et voir les différentes possibilités que l'on obtient. Ici si j’écris un trait d'union alors, le fameux tiret-6, comme on dit dans les adresses e-mail, ou le moins en fait qui est utilisé correspond en réalité un quart de cadratin, ici je serai à un cadratin, ici à un demi-cadratin, donc je suis à peu près sensiblement à un quart de cadratin. Si j'utilise le deuxième caractère maintenant qui serait le dash « en dash », ici je suis dans un demi-cadratin, ici je prends le « em dash », là je suis dans un pur cadratin. Alors dans quel cas va-t-on utiliser ces tirets ? Parce que tout le temps on utilise le trait d'union. Et bien celui dont on vient de parler, donc le trait d'union, on va l'utiliser le petit tiret-6, en trait d'union justement. Donc quand vous allez taper un mot, vous allez utiliser le tiret-6, ou le moins pour pouvoir séparer les mots. Par contre si vous utilisez « 5-6 », ou de « 5 à 6 », par exemple, ou par exemple un tiret qui pourrait être le début de liste, il vaudra mieux utiliser un demi-cadratin. Et si vous utilisez un dialogue pour dire « Bonjour », par exemple, ici vous allez utiliser plutôt un cadratin, qui sera placé devant le mot. Et puis regardez ici au passage l'utilisation du « &thinsp » entre le point d'exclamation et la derrière partie du mot ce n'est pas un espace. C'est vrai que communément on utilise un espace, en règle typographique il faudrait utiliser un espace thin, « &thinsp ». Après c'est à vous de voir comment vous allez pouvoir porter la typographie sur vos pages. Rapidement regardons la quantité un peu astronomique, presque d'apostrophes et de guillemets, que nous avons à disposition en HTML. Alors on a au départ le classique apostrophe et guillemet qui peuvent être utilisés soit directement au clavier, soit par leur entité HTML. Alors je vous invite aussi à chercher les entités numéraires ou unicodes, là j'ai simplement utilisé les entités HTML textuelles, mais vous avez aussi à disposition des guillemets et des apostrophes inversés un peu plus à l'anglaise on va dire, ou à la française ici en utilisant-- alors là je n'ai pris que leurs entités HTML également, d'autres entités, donc ici « l », pour left, « r » pour right, « s » pour simple, « d » pour double. Voilà donc je invite après à faire la jonction et à relire chacune de ces entités. Et surtout un point assez important, c'est pour pouvoir exprimer les primes ou les secondes, vous savez souvent on utilise des apostrophes, mais il existe deux caractères qui sont dédiés, qui sont le prime avec un « p » minuscule, ou le Prime avec un « p » majuscule, pour les minutes et secondes qui peuvent être donc directement utilisées et employéss sous forme d'entité HTML, Alors voilà maintenant quant à savoir si vous allez implémenter ou non des règles typographiques au sein de vos contenus, libre à vous sachez que HTML, peut vous accompagner dans cette démarche.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !