Accueil

Traduction

Tutoriel CSS3 - sommaire

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

CSS : de nouveaux effets pour le texte avec CSS3

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

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

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

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

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

Syntaxe

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 :

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 :

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

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

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

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.

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

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.

Exemple

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

Le texte est automatiquement aligné à droite.

Le code correspondant

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