Informatique


Le texte

Aller à

La hauteur de ligne

line-height permet de spécifier la hauteur minimale d'une ligne d'un bloc de texte.

On utilise une valeur positive en px, %, pt, em et rem.
rem semble être interprété de la même façon sur tous les navigateurs.

Hauteur de ligne:
line-height : normal/*valeur par défaut, il s'agit de la hauteur normale compte tenu de la taille des caractères*/
line-height : 2rem/*une valeur est fournie, les unités pt, pica, em et rem (sont relatives aux polices de caractères) sont les plus souhaitables*/
line-height : 20%/*ce pourcentage réagit comme un coefficient multiplicateur de la taille de la police courante*/

Démo
	<html>
	<head>
	<style>
	.blocref1, .blocref2, .blocref3	{
		margin-top:50px;
	}
	.blocref1	{
		background:rgba(0,200,0,1);
		line-height:1rem;
		font-size:1rem;
	}
	.blocref2	{
		background:rgba(0,200,0,1);
		line-height:2rem;
		font-size:1rem;
	}
	.blocref3	{
		background:rgba(0,200,0,1);
		line-height:3rem;
		font-size:1rem;
	}
	</style>
	</head>
	<body>
		<div class="blocref1">	
		Mon monde.	
		</div>
		<div class="blocref2">	
		Mon monde.	
		</div>
		<div class="blocref3">	
		Mon monde.	
		</div>
	</body>
	</html>

Aligner le texte verticalement

vertical-align permet d'aligner le texte sur la hauteur de ligne.

On peut utiliser un mot clé ou une valeur numérique exprimée en pourcent

Mise en exposant et la mise en indice
vertical-align : baseline/*valeur par défaut, alignement vertical normal*/
vertical-align : sub/*place le texte en indice (sans modification de la taille des caractères)*/
vertical-align : super/*place le texte en exposant (sans modification de la taille des caractères)*/
vertical-align : 12%/*place le texte en exposant*/
vertical-align : -10%/*place le texte en indice*/

Démo
	<html>
	<head>
	<style>
	.av1	{
		vertical-align:super;
	}
	.av2	{
		vertical-align:sub;
	}
	.av3	{
		vertical-align:65%;
	}
	.av4	{
		vertical-align:-15px;
	}
	</style>
	</head>
	<body>
	<div>	
	Je détiens la vérité, aussi vrai que 3<span class="av1">2</span> font 9<br>
	Moi aussi je détiens la vérité, aussi vrai que le mot<span class="av2">coucou</span> est en indice.<br>
	L'utilisation des % dans le vertical-<span class="av3">align</span> que j'ai envoyé à 65% vers le haut.<br>
	Je détiens la vérité, aussi vrai que j'ai placé le <span class="av4">2</span> 15 px au dessous.<br>
	</div>
	</body>
	</html>

Espaces inter-caractères

La propriété letter-spacing permet d'espacer les caractères d'un mot.

Comme d'habitude on peut utiliser l'unités de son choix, rem est le plus adéquat.

Espacements:
letter-spacing : 1.2rem/*espacement de 1.2px des lettres*/

Démo
	<html>
	<head>
	<style>
		h1{letter-spacing:1.2rem}
	</style>
	</head>
	<body>
		<h1>Citations</h1>
		<div>Il ne faut pas appeler richesses les choses que l'on peut perdre.</div>
	</body>
	</html>

Espaces inter-mots

La propriété word-spacing permet d'espacer les mots d'un texte.

Espacements:
word-spacing : 1.2rem/*espacement de 1.2rem des mots dans la phrase*/

Comme d'habitude on peut utiliser l'unités de son choix, rem est le plus adéquat.

Démo
	<html>
	<head>
	<style>
		div{word-spacing:1.2rem}
	</style>
	</head>
	<body>
		<h1>Citations</h1>
		<div>Il ne faut pas appeler richesses les choses que l'on peut perdre.</div>
	</body>
	</html>

Décorer le texte

La propriété text-decoration permet de décorer le texte.

Décorer le texte:
text-decoration : underline/*souligne le texte*/
text-decoration : overline/*surligne le texte*/
text-decoration : line-through/*barre le texte*/
text-decoration : blink/*texte clignotant (uniquement Mozilla)*/
text-decoration : none/*pour annuler un ou plusieurs effets*/

Démo
	<html>
	<head>
	<style>
		.div1{text-decoration:underline;}
		.div2{text-decoration: line-through;}
		.div3{text-decoration:overline;}
	</style>
	</head>
	<body>
		<h1>Citations</h1>
		<div class=div1>Il ne faut pas appeler richesses les choses que l'on peut perdre.</div>
		<div class=div2>Savoir écouter, c'est posséder, outre le sien, le cerveau des autres.</div>
		<div class=div3>Jamais le soleil ne voit l'ombre.</div>
	</body>
	</html>

Transformer le texte

La propriété text-transform permet de modifier la casse des caractères.

Casse:
text-transform : capitalize/*les initiales de chaque mot du texte en majuscules*/
text-transform : uppercase/*le texte en majuscules*/
text-transform : lowercase/*le texte en minuscules*/
text-transform : none/*aucun effet sur le texte*/

Démo
	<html>
	<head>
	<style>
		.div1{text-transform:uppercase;}
	</style>
	</head>
	<body>
		<h1>Citations</h1>
		<div class=div1>Il ne faut pas appeler richesses les choses que l'on peut perdre.</div>
	</body>
	</html>

Aligner le texte

La propriété text-align permet de définir l'alignement d'un texte.

Il s'agit de l'alignement à l'intérieur du bloc qui contient le texte et non pas du bloc lui--même.

text-align : center/*centrer le texte*/
text-align : right/*cadrer le texte à droite*/
text-align : left/*cadrer le texte à gauche*/
text-align : justify/*cadrer le texte à gauche et à droite*/

Démo
	<html>
	<head>
	<style>
		.div1{text-align:center;}
	</style>
	</head>
	<body>
		<h1>Citations</h1>
		<div class=div1>Il ne faut pas appeler richesses les choses que l'on peut perdre.</div>
	</body>
	</html>

Indenter le texte

La propriété text-indent définit l'indentation de la première ligne d'un bloc de texte.

text-indent : 1rem/*indentation de la première ligne de 1 rem (retrait à gauche)*/

Démo
	<html>
	<head>
	<style>
		.div1{text-indent:1rem;}
	</style>
	</head>
	<body>
		<h1>Citations</h1>
		<div class=div1>Et si moi je suis barge,<br>
		Ce n'est que de tes yeux, <br>
		Car ils ont l'avantage d'être deux. (Renaud)
	</div>
	</body>
	</html>

Organiser des colonnes

1er cas : la largeur de l'élément est divisé par le nombre de colonnes

La répartition sur les colonnes se fait automatiquement.

div {column-count : 4;} /*la largeur de l'élément sera divisé en 4*/
Démo
	<html>
	<head>
	<style>
	.journal	{
		column-count : 4;
	}
	</style>
	</head>
	<body>
		<h1>Texte</h1>
		<div class=journal> <!-- Lorem Ipsum -->
	</div>
	</body>
	</html>
2ème cas : la largeur minimale des colonnes est fixée.

On fixe une largeur relative (ou absolue).

div {column-width : 20%;} /*autant de colonnes de minimum 20% de le taille de l'lément*/
Démo
	<html>
	<head>
	<style>
		.journal	{column-width : 200px;}
	</style>
	</head>
	<body>
		<h1>Texte</h1>
		<div class=journal> <!-- Lorem Ipsum -->
	</div>
	</body>
	</html>
3ème cas : la largeur minimale et le nombre de colonnes sont fixés.

On fixe le nombre de colonnes et leur largeur.

div {column-count : 2;
column-width : 400px;}
/*nombre de colonnes et largeur de chaque colonne/*
Démo
	<html>
	<head>
	<style>
		.journal	{
			column-count : 2;
			column-width : 400px;
			}
	</style>
	</head>
	<body>
		<h1>Texte</h1>
		<div class=journal> <!-- Lorem Ipsum -->
	</div>
	</body>
	</html>

Dans les trois cas si aucune hauteur n'est spécifiée pour la classe les colonnes seront équilibrées.
Si une hauteur est définie et si le texte est trop long pour être contenu dans le nombre de colonnes précisé alors il y a rajout d'autant de colonnes que nécessaire. Si le rajout n'est pas suffisant une partie du texte sera masqué.