CSS : de nouveaux effets pour le texte avec CSS3

importer une police
styliser le soulignement du texte
ombrer le texte
césure de mot
décoration de texte
prise en compte (ou pas) des espaces et sauts à la ligne saisis
orientation verticale du texte
sens de l'écriture de droite à gauche

Rappels : les balises style de HTML

Avant d'aborder les nouveaux effets pour le texte, je voudrais revenir sur les effets de style toujours confiés à HTML (et non pas CSS).

En principe HTML gère la structure et la sémantique et CSS s'occupe du style. Mais il existe encore quelques balises de style qui n'ont pas été déclassées par la norme HTML5. En effet les développeurs web sont très attachés à ces éléments et le recours au CSS entrainerait un code plus lourd.

Exemple 1

Le rendu

Texte en gras ; Texte en italique ; Texte souligné ; ~~Texte barré~~

Texte en position normale ; ^{Texte en exposant} ; _{Texte en indice}

Texte important et en gras ; Texte avec emphase et en italique

Le code HTML

<div>
	<p><b>Texte en gras </b> ; <i>Texte en italique</i> ; <ins>Texte souligné</ins> ; <del>Texte barré</del>
	<p><span>Texte en position normale</span> ; <sup>Texte en exposant</sup> ; <sub>Texte en indice</sub>
	<p><strong>Texte important et en gras</strong> ; <em>Texte avec emphase et en italique</em>
</div>

Ci-dessous les principales balises de style encore valides. Elles sont toutes de type "inline".
Les éléments U & S ont été déclassés ; il faut utiliser à la place INS & DEL.

Attention ne considérez pas que les balise B et STRONG sont équivalentes.
L'élément STRONG a un sens sémantique : texte très important alors que le rôle de B est purement visuel : mettre en gras.

De même les balises I et EM ont des valeurs différentes.
L'élément EM (EM comme emphase) a une valeur sémantique. ça signifie "mettre l'accent sur ..." Alors que le rôle de I est simplement de mettre en italique.

Les textes balisés par STRONG & EM sont pris en compte par les moteurs de recherche.

Exemple 2

Imaginez que les balises de style évoquées ci-dessus ne peuvent plus être utilisées. La solution serait d'utiliser toujours l'élément générique SPAN avec l'attribut style ou l'attribut class.

Le rendu

Texte en gras ; Texte en italique ; Texte souligné ; Texte surligné ; Texte barre ;

Texte en position normale Texte en exposant Texte en position indice

Extrait de la feuille de style de la page

	span.gras {font-weight : bold; }
	span.italique {font-style : italic; }
	span.souligne {text-decoration-line : underline; }
	span.surligne {text-decoration-line : overline; }
	span.barre {text-decoration-line : line-through; }
	span.exposant {font-variant-position : super; }
	span.indice {font-variant-position : sub; }

Une bonne révision de certaines propriétés CSS !

Le code HTML

<div>
	<p><span class ="gras" >Texte en gras</span> ; 
	<span class ="italique" >Texte en italique</span> ;
	<span class ="souligne" >Texte souligné</span> ;
	<span class ="surligne" >Texte surligné</span> ;
	<span class ="barre" >Texte barre</span> ;

	<p><span>Texte en position normale</span> 
	<span class ="exposant">Texte en exposant</span> 
	<span class ="indice">Texte en position indice</span> 
</div>

J'espère que vous comprennez mieux pourquoi le principe de répartition des rôles entre le HTML et le CSS connait quelques exceptions et les balises "inline" de style sont toujours valides.
Les éléments ci-dessous sont obsolètes :
acronym, basefont, big, center, dir, frame, strike, etc.

Après cette digression HTML, revenons à l'objet de ce chapitre : les nouveaux effets de style pour le texte.

Espacements entre les mots et les lettres

Exemple

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.

Importer une police

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

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>
...
<h3 class = 'special'>Les instituteurs : les 'hussards' de la République</h3>
<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 (règle @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 tous les types de fichiers relatifs aux polices, il faut proposer plusieurs fichiers. Ici je propose un fichier ttf et un fichier otf 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.
Par défaut l'ombre est en bas et à droite du texte.
Pour le troisième paramètre 0px correspond à l'absence de floutage.

Styliser 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.
Désormais il est possible de styler de façon plus précise le soulignement.

Exemple

Ceci est un texte souligné avec une ligne ondulée

Le code correspondant

	.joli {color : green ; text-decoration-line : underline ;
		text-decoration-color : red ; text-decoration-style : wavy;}
	...
	<p class ="joli">Ceci est un texte ...

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

Syntaxe

text-decoration-color argumentée avec un nom de couleur ou un code couleur (RGB, hexadécimal, etc.)
text-decoration-style argumentée avec solid (valeur par défaut), double, dotted, dashed, wavy (trait ondulé)
text-decoration-line argumentée avec none (valeur par défaut), underline, overline, line-through (trait au milieu)

Le raccourci text-decoration

À la place des trois propriétés vous pouvez utiliser le raccourci text-decoration avec trois valeurs.
Exemple :

Ceci est un texte surligné avec un trait double

Le code correspondant :
<p style ="text-decoration : overline olive double; font-size : 30px;" >Ceci est un texte ...

Forcer la coupure de mot

Vous pouvez utilisez la balise orpheline WBR donc du HTML ou du CSS avec la propriété word-break.

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é CSS word-break permet la coupure de mots trop longs.

Anticonstitutionnellement
Anticonstitutionnellement
Anticonstitutionnellement

Le code correspondant : <div style ="width : 150px ; word-break : break-all ; border : 1px solid black;"> <p style ="font-size : 26px;text-align : justify;" >Anticonstitutionnellement <br>Anticonstitutionnellement <br>Anticonstitutionnellement </div>

word-break

normal (valeur par défaut) : coupure uniquement sur espace ou tirets
break-all : coupure à n'importe quel endroit

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 lang de la balise HTML pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.

Attention la propriété hyphens est encore très mal implémentée.
Sur certains navigateurs, elle fonctionne à condition d'utiliser les propriété préfixées : -webkit-hyphens, -ms-hyphens, -moz-hyphens

Le code correspondant

<html lang ="fr">
...
<div  style ="width : 150px ; border : 1px solid black; hyphens : auto;" >
	<p style ="font-size : 26px;" >Anticonstitutionnellement
	<br>Anticonstitutionnellement
	<br>Anticonstitutionnellement
</div>
...

Le rendu

Anticonstitutionnellement
Anticonstitutionnellement
Anticonstitutionnellement

Si le texte déborde de la boite c'est que la propriété hyphens n'est pas encore prise en compte par le navigateur que vous utilisez.

Hyphens en priorité et word-break par défaut

On peut désormais créer en CSS des styles conditionnels. Ainsi vous connaissez la règle @media incontournable dans le cadre du "responsive web design".
Il existe auss la règle @supports qui permet de tester l'implémentation ou pas d'une propriété CSS dans un navigateur.

Objectif

Nous voulons que ce soit la propriété hyphens qui s'applique en priorité et à défaut la propriété word-break.

Le code CSS & HTML correspondant de la page

...
.multi
{	
	width : 100% ; margin : 10px auto ;  padding : 10px; 
	background : lightgrey; 
	column-count : 3 ; colum-width : auto ;	column-gap :2% ;	
	column-rule : 2px solid silver; 
} 
.coupure {word-break : break-all ;}
	@supports(hyphens : auto) {.coupure {word-break:normal; hyphens:auto;}}
...
<div class ="multi coupure">
<h3>Titre principal</h3>
<p>Comme je viens de te le dire Florence, ce n’est malheureusement pas une blague. David a travaillé sur deux anciennes technologies 
...
...

On applique au texte deux classes : "multi" (pour disposer sur plusieurs colonnes) & "coupure" (pour provoquer des césures).

On définit la classe "coupure" puis on pose un test dans la deuxième règle ; règle qui peut s'énoncer ainsi : si hyphens implémentée alors propriété "word-break" désactivée dans cette classe et remplacée par "hyphens".

Le rendu dans un Iframe

Orientation des lignes d'écriture

Exemple

le css3 c'est formidable !

le css3 est de plus en plus puissant !

Le code correspondant

<p style ="writing-mode : horizontal-tb; font-size : 30px; text-transform : uppercase ;" >
le css3 c'est formidable ! </p>
<p style ="writing-mode : vertical-rl; font-size : 24px;text-transform : uppercase ;" >
le css est de plus en plus puissant ! </p>

"horizontal-tb" (valeur par défaut) : le texte est affiché horizontalement
"vertical-rl" : le texte est affiché verticalement de haut en bas
"vertical-lr" : écriture de haut en bas avec passage à la ligne de gauche vers la droite

Conservation des espaces et sauts de ligne saisis

Appliquée à un bloc la propriété white-space indique s'il faut prendre en compte ou pas les espaces et retours à la ligne saisis dans le code HTML.

"normal" (valeur par défaut) : tous les espaces tapés et sauts de ligne entre deux mots remplacés par un seul espace.
"pre" : conservation de tous les espaces et retours à la ligne saisis

Exemple

Le code JS est : 
       //script qui permet de saisir deux nombres et d'afficher leur somme
var vpremier = prompt('tapez un décimal') ; 
var vdeuxieme = prompt('tapez un décimal') ; 
var vsomme = Number(vpremier) + Number(vdeuxieme) ; 
document.write('somme des deux décimal est égale à  : ' + vsomme) ; 

Une instruction par ligne.

Le code correspondant

<div style ="white-space : pre ; color : olive;">
Le code JS est : 
       //script qui permet de saisir deux nombres et d'afficher leur somme
var vpremier = prompt('tapez un décimal, séparateur est .') ; 
var vdeuxieme = prompt('tapez un décimal, séparateur est .') ; 
var vsomme = Number(vpremier) + Number(vdeuxieme) ; 
document.write('somme des deux décimal est égale à  : ' + vsomme) ; 
</div>

Employer la propriété white-space : pre est équivalent à l'emploi de la balise PRE.

Sens de l'écriture

Certaines langues s'écrivent de droite à gauche dont les langues sémitiques (arabe, hébreu).
L'emploi de la propriété direction est alors nécessaire.

"ltr" ("left to right") : de gauche à droite ; c'est la valeur par défaut
"rtl" ("right to left") : de droite à gauche

Exemple

אהץװלנ אהץװלנ אהץװלנ אהץװלנ אהץװלנ אהץװלנ

Le texte est automatiquement aligné à droite.

Le code correspondant

<div style ="direction : rtl">
	אהץװלנ אהץװלנ אהץװלנ אהץװלנ אהץװלנ אהץװלנ
</div>

Pour insérer des lettres de l'alphabet hébraïque, le plus simple est de passer par un traitement de texte tel Writer de libre Office et plus précisément utiliser la commande Insertion/caractères spéciaux ...

Traduction

Tutoriel CSS3 - sommaire

Révisions CSS2

Nouveautés CSS3

Transformations, transitions & animations

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville

CSS : de nouveaux effets pour le texte avec CSS3

Rappels : les balises style de HTML

Exemple 1

Le rendu

Le code HTML

Exemple 2

Le rendu

Extrait de la feuille de style de la page

Le code HTML

Après cette digression HTML, revenons à l'objet de ce chapitre : les nouveaux effets de style pour le texte.

Espacements entre les mots et les lettres

Exemple

Le code correspondant

Importer une police

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

Le code correspondant

Commentaire

Ombrer le texte

Exemple

Code correspondant

Styliser le soulignement

Exemple

Le code correspondant

Syntaxe

Le raccourci text-decoration

Forcer la coupure de mot

La propriété word-break

La propriété hyphens

Le code correspondant

Le rendu

Hyphens en priorité et word-break par défaut

Objectif

Le code CSS & HTML correspondant de la page

Le rendu dans un Iframe

Orientation des lignes d'écriture

Exemple

Le code correspondant

Conservation des espaces et sauts de ligne saisis

Exemple

Le code correspondant

Sens de l'écriture

Exemple

Le code correspondant