CSS : de nouveaux effets pour le texte avec CSS3

Rappels de certains effets existants déjà dans la spécification CSS2

Exemple

Déja avec CSS2 on peut jouer sur l'espacement entre lettres d'un mot et entre mots.

Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.

Le code correspondant

<div style ="border : 1px solid black; " > <p style ="text-align : left ; padding : 5px; letter-spacing : 2px ; word-spacing : 10px ; "> Et licet quocumque oculos ... </p> </div>

Valeur par défaut des propriétés letter-spacing & word-spacing : normal
Normal : espace entre les lettres et mots tel qu'il est défini par la police courante et/ou le navigateur.

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 ... ...

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.

Ombrer le texte

Exemple

Texte ombré avec projection normale de l'ombre

Texte ombré avec projection inversée de l'ombre

Code correspondant

<p style = "font-size : 200%; color : blue; text-shadow : 2px 2px 3px blue ;"> Texte ombré avec projection normale de l'ombre</p> <p style = "font-size : 200%; color : green; text-shadow : -2px -2px 3px green ;"> Texte ombré avec projection inversée de l'ombre</p>

Pour la propriété text-shadow il y a quatre paramètres à passer : décalage horizontal, décalage vertical, floutage, couleur de l'ombre.
Pour les deux premiers paramètres la valeur peut être négative afin d'inverser la projection de l'ombre.
Pour le troisième paramètre 0px correspond à l'absence de floutage.

Styler 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é.

Le code HTML

<p class ="souligne">Ceci est un texte ...

La définition de la classe "souligne

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

J'ai utilisé les nouvelles propriétés : text-decoration-color, text-decoration-style, text-decoration-line.

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 !
Retour menu