CSS : de nouveaux effets pour le texte avec CSS3

importer une police
styler 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

Dans ce chapitre j'évoque aussi les styles conditionnels grâce à la règle @supports.

Certains effets existants déjà dans la spécification CSS2

On pouvait déjà jouer sur l'espacement entre lettres d'un mot et l'espacement entre mots.

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

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

	.souligne {color : green ; text-decoration-line : underline ;
		text-decoration-color : red ; text-decoration-style : wavy;}
	...
	<p class ="souligne">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 abandonnées depuis longtemps 
et il les a couplées. Séparées, elles ne valaient rien, mais, il les a réunies et a démarré le processus. Comme tu dois le savoir, il y a maintenant plus 
d’ordinateurs sur terre que d’humains et tous ces ordinateurs sont connectés entres eux grâce au réseau des réseaux : Internet.
...

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" (valeur par défaut) : de gauche à droite
"rtl" : 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 CSS - sommaire

Révisions CSS2

Nouveautés CSS3

Nouveautés CSS3 - suite

Transformations, transitions & animations

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

CSS : de nouveaux effets pour le texte avec CSS3

Certains effets existants déjà dans la spécification CSS2

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

Styler 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