CSS3 : de nouveaux effets pour le texte

Mais attention ces différents outils ne sont pas encore complètement implémentés par les navigateurs.
Ainsi les coupures propres (entre deux syllabes et avec trait d'union) ne fonctionnent que sur Edge et Firefox mais pas sur Chrome. A l'inverse l'importation de polices ne fonctionne qu'avec Chrome et Firefox.

Importer une police

Vous avez avez réalisé en local un superbe site en particulier par l'emploi d'une police exotique. Mais au moment de penser à l'hébergement du site (afin que le public y ait accès) vous vous dites :'c'est idiot ! la police que j'ai employée ne sera probablement pas installée sur le PC du visiteur donc je me suis fatigué pour rien ... '
Rassurez vous. Vous pouvez désormais grâce au CSS3 mettre une police à disposition du 'client' le temps de sa visite.

Le titre et le texte ci-dessous apparaissent normalement avec une police téléchargée grâce à la feuille de style.
Testez cet exemple avec Chrome !

Les instituteurs : les 'hussards' de la République

La troisième République veut que l'école élémentaire dispense non seulement l'instruction de base mais aussi fasse des petits français des patriotes prêts à se battre pour leur pays ; et à venger l'affront de mil huit cent soixante dix ; à reprendre l'Alsace et la Lorraine aux "boches".

Le code correspondant

... <style> @font-face{font-family : scolaire; src:url(ecole.ttf), url(ecole.otf) ;} .special {font-family : scolaire, serif ; font-size : 24px ; } ... <body> ... <p class ='special'>La troisième République veut que l'école élémentaire dispense non seulement l'instruction de base mais aussi fasse des petits français des patriotes prêts à se battre pour leur pays ; à venger l'affront de mil huit cent soixante dix ; à reprendre l'Alsace et la Lorraine aux "boches". </p> ...

Commentaire

Le texte affecté de la classe special est mis en forme avec une police qui n'est pas installée sur votre PC ...
Il est en effet possible avec CSS3 d'embarquer une police !
Regarder attentivement la feuille de style !
La première règle de style (sélecteur @font-face) permet au client d'embarquer un fichier de police sous le nom "scolaire" et qui correspond au fichier "ecole.ttf" ou "ecole.otf".
Il suffit ensuite de préciser que tout texte affecté de la classe générique special sera mis en forme avec la police dénommée scolaire.

Aucun navigateur ne reconnaissant pas tous les types de fichiers relatifs aux polices, il faut proposer plusieurs fichiers. Ici je propose un fichier ttf et un fichier ttf pour la même police.

Style le soulignement

Jusqu'à présent le soulignement et/ou le surlignement étaient forcément de la même couleur que le texte et consistait en un trait continu.

Ceci est un texte souligné.
J'ai utilisé les nouvelles propriétés : text-decoration-color, text-decoration-style, text-decoration-line.

Le code CSS correspondant

	.souligne {color : green ; text-decoration-line : underline ;text-decoration-color : red ; text-decoration-style : wavy;}

Le code HTML

<p class ="souligne">Ceci est un texte souligné. <br>... </p>

Syntaxe

Forcer la coupure de mot

La propriété word-break

Lorsqu'un mot est plus long que la largeur de la boite qui le contient il déborde. C'est pas joli.
La propriété CSS3 word-break permet la coupure de mots trop longs.

Anticonstitutionnellement
Anticonstitutionnellement
Anticonstitutionnellement

Le code correspondant :

<div style ="width : 100px ; word-break : break-all ; border : 1px solid black; font-size : 150%;" > <p>Anticonstitutionnellement <br>Anticonstitutionnellement <br>Anticonstitutionnellement </div>

La propriété hyphens

Alors que word-break coupe le mot long n'importe où la propriété hyphens ne coupe jamais une syllabe.
Le comportement défini par la valeur "auto" dépend de la langue indiquée dans la page. Aussi, il faut indiquer la langue via l'attribut HTML lang pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.
Cette nouvelle propriété CSS doit encore être préfixée et n'est pas encore implémentée par Chrome.

Anticonstitutionnellement
Anticonstitutionnellement
Anticonstitutionnellement

Le code correspondant :

<html lang ="fr"> ... div.cesure {-webkit-hyphens : auto ; -moz-hyphens : auto ; -ms-hyphens : auto ; hyphens : auto;} ... <div class ="cesure" style ="width : 100px ; border : 1px solid black; font-size : 150%;" > <p>Anticonstitutionnellement <br>Anticonstitutionnellement <br>Anticonstitutionnellement </div> .. Testez cet exemple avec Firefox ou Edge mais pas avec Chrome !

Augmenter la largeur des caractères

StarWars

StarWars

StarWars

Le code correspondant

<p style = "font-size : 300% ; font-stretch : ultra-expanded;">StarWars</p> <p style = "font-size : 300% ; font-stretch : normal;">StarWars</p> <p style = "font-size : 300% ; font-stretch : ultra-condensed;">StarWars</p>

En principe les lettres dans la première ligne doivent être très larges et celles de la troisième ligne très étroites.
Mais cette propriété n'est pas encore implémentée sur les grands navigateurs ... Donc je n'en dis pas plus sur cette propriété pour le moment en particulier sur les différentes valeurs qu'elle peut prendre.
Retour menu