Accueil

Traduction

Tutoriel CSS - sommaire

Tutoriel CSS - 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

Mais attention, certaines de ces fonctionnalités ne sont pas encore complètement implémentés par les navigateurs.
Ainsi la coupure "propre" (entre deux syllabes et avec trait d'union) avec la nouvelle propriété hyphens n'est pas encore implémentée sur tous les navigateurs récents ....

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

Déja avec CSS2 on peut jouer sur l'espacement entre lettres d'un mot et 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 (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 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.

Ceci est un texte souligné.

Le code correspondant

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

Syntaxe

la prise en compte par les navigateurs de ces trois propriétés tarde à venir.

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

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.

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

On peut désormais créer en CSS des styles conditionnels avec les mots clés @media et @supports.
Objectif : nous voulons que ce soit la propriété hyphens qui s'applique en priorité et à défaut word-break.

Le code correspondant

Nous avons créé une règle de style conditionnelle. Celle-ci tient sur deux lignes.
Attention j'ai simplifé la syntaxe. En cette année 2022 et compte tenu de la mauvaise implémentation de la propriété hyphens, il serait préférable d'écrire :

Orientation des lignes d'écriture

Le rendu

le css3 c'est formidable !

le css3 est de plus en plus puissant !

Le code correspondant