Coupure de mots

Internet Explorer 10 et les applications du Windows Store en JavaScript dans Windows 8 prennent en charge une autre fonctionnalité importante de niveau 3 relative au texte CSS : la coupure de mots. La coupure de mots automatique est particulièrement utile étant donné la prise en charge de la nouvelle fonctionnalité de disposition multicolonne. En utilisant la coupure de mots CSS3, vous pouvez :

  • Couper le texte automatiquement en fonction d’un dictionnaire intégré
  • Spécifier le nombre minimal de caractères qu’un mot doit contenir pour être coupé
  • Spécifier le nombre minimal de caractères à laisser en début de ligne après une césure
  • Spécifier le nombre minimal de caractères à laisser en fin de ligne avant une césure
  • Spécifier une zone de césure en dehors de laquelle la césure est forcée
  • Spécifier le nombre maximal de lignes consécutives pouvant être coupées
Remarque  En raison de l’état préliminaire de la partie relative à la coupure de mots de la spécification « CSS3 Text Working » à l’état d’ébauche, les propriétés dans cette rubrique doivent être utilisées avec le préfixe Microsoft, « -ms- » pour fonctionner dans Internet Explorer 10.
 

L’exemple de code suivant montre une petite partie de texte à laquelle aucune propriété de coupure n’est appliquée. Nous allons utiliser cet exemple à des fins d’illustration des propriétés de coupure de mots.


<!DOCTYPE html>
<html lang="en-us">
<body>
  <div style="width: 130px; border: 1px solid black;">
  <p style="text-align: justify; font-size: 11pt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur feugiat diam eu ipsum congue ac ultricies nisl rhoncus. Curabitur scelerisque arcu a leo
  mollis porta. Ut eu quam ut odio tempor ornare.</p>
  </div>
</body>
</html>


Ce balisage s’affiche comme suit dans Internet Explorer 10 :

Une petite sélection de texte justifié dans une boîte étroite, à laquelle aucune propriété de coupure de mots n’est appliquée, pour cette raison il y a des espaces importants entre les mots.

Propriété -ms-hyphens

La propriété -ms-hyphens active la coupure de mots. Sa syntaxe est indiquée ici :

PropriétéDescription

-ms-hyphens

Indique si d’autres possibilités de césure pour la ligne actuelle sont créées en coupant certains mots. La propriété -ms-hyphens est définie avec une des valeurs suivantes :

none

Indique que toutes les césures sont supprimées, y compris les traits d’union conditionnels (indiqués par le caractère &shy;).

manual

Indique que la césure de mots est autorisée uniquement à l’endroit où des possibilités de césure sont suggérées. Ces suggestions peuvent avoir la forme de traits d’union conditionnels ou de traits d’union insérés manuellement.

auto

Indique que, en plus des possibilités de césure de mots suggérées, des césures sont autorisées à l’endroit indiqué par le dictionnaire des coupures de mots intégré. Les traits d’union conditionnels prévalent sur les autres possibilités de coupure de mots, mais ils restent soumis aux propriétés de coupure de mots.

 

Voici un exemple d’utilisation de la propriété -ms-hyphens, définie sur auto :


<!DOCTYPE html>
<html lang="en-us">
<body>
  <div style="width: 130px; border: 1px solid black;">
  <p style="-ms-hyphens: auto; text-align: justify; font-size: 11pt;">Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Curabitur feugiat diam eu ipsum congue ac ultricies nisl rhoncus.
  Curabitur scelerisque arcu a leo mollis porta. Ut eu quam ut odio tempor ornare.</p>
  </div>
</body>
</html>


Ce balisage s’affiche comme suit dans Internet Explorer 10 :

La même petite sélection de texte justifié dans une boîte étroite que dans l’image précédente, avec la propriété -ms-hyphens définie sur ‘auto’ appliquée. Les espaces sont moins importants que dans l’image précédente, car plusieurs mots ont été automatiquement coupés

Propriété -ms-hyphenate-limit-zone

La propriété -ms-hyphenate-limit-zone définit la largeur de la zone de coupure ou l’espace de fin (sans prendre en compte les effets de la justification) pouvant rester dans la ligne avant que la coupure ne soit effectuée. Sa syntaxe est indiquée ici :

PropriétéDescription

-ms-hyphenate-limit-zone

Spécifie l’espace maximal non rempli (avant la justification) pouvant rester dans la ligne avant que la coupure soit effectuée. La valeur peut être un pourcentage non négatif (de la largeur totale de la ligne) ou une valeur de longueur.

 

Voici un exemple de la propriété -ms-hyphenate-limit-zone.


<!DOCTYPE html>
<html lang="en-us">
<body>
  <div style="width: 130px; border: 1px solid black;">
  <p style="-ms-hyphens: auto; -ms-hyphenate-limit-zone: 50px; text-align: justify; font-size: 11pt;">
  . . .
  </p>
  </div>
</body>
</html>


Dans ce cas, la longueur de la zone est 50 pixels. Toute ligne qui, avant la justification, contient du texte se terminant avant la zone de coupure, récupère une partie coupée d’un mot de la ligne suivante, comme le montre l’image suivante. Dans ce cas, les deuxième et sixième lignes de texte (surlignées en rose) ne sont pas suffisamment longues pour s’étendre dans la zone de coupure de mots. Par conséquent, le premier mot des deux lignes suivantes est coupé et la première partie du mot est placé sur la ligne précédente.

Un exemple « avant et après » d’une sélection de texte à l’intérieur d’une boîte de contenu. Les deuxième et sixième lignes du texte « avant » contiennent du texte qui ne s’étend pas dans la zone de coupure de mots. Dans l’exemple « après », le premier mot des troisième et septième lignes a été coupé et la première partie du mot est placée à la fin de la ligne précédente

Propriété -ms-hyphenate-limit-chars

La propriété -ms-hyphenate-limit-chars indique le nombre minimal de caractères dans un mot coupé. Sa syntaxe est indiquée ici :

PropriétéDescription

-ms-hyphenate-limit-chars

Spécifie entre une et trois valeurs qui indiquent le nombre minimal de caractères dans un mot coupé. Si le mot ne comporte pas le nombre minimal de caractères requis avant ou après la coupure, le mot n’est pas coupé.

  • first value  Le nombre minimum de caractères au total dans un mot requis pour que le mot puisse être coupé.
  • second value  Le nombre minimum de caractères avant une coupure requis pour que le mot puisse être coupé.
  • third value  Le nombre minimum de caractères suivant une coupure requis pour que le mot puisse être coupé.

Vous pouvez également utiliser le mot clé auto pour remplacer certaines ou toutes les valeurs. Le mot clé auto correspond aux valeurs "5 2 2", indiquant une limite de 5 caractères par mot, 2 caractères avant et 2 caractères après une césure.

Voir la page de référence consacrée à la propriété -ms-hyphenate-limit-chars pour découvrir ce qu’il se produit si vous n’indiquez pas une de ces valeurs.

 

Voici ci-dessous un exemple d’utilisation de la propriété -ms-hyphenate-limit-chars. Dans ce cas, la propriété est définie sur "auto 3", qui indique que la taille minimale du mot est automatique (c’est-à-dire, 5) et que le nombre minimal de caractères avant et après la césure est 3. Cela signifie que le mot qui a été coupé dans l’exemple précédent après two (deux) caractères, « ultricies » ne sera plus coupé de cette manière.


<!DOCTYPE html>
<html lang="en-us">
<body>
  <div style="width: 130px; border: 1px solid black;">
  <p style="-ms-hyphens: auto; -ms-hyphenate-limit-chars: auto 3; text-align: justify; font-size: 11pt;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat diam eu ipsum congue ac
  ultricies nisl rhoncus. Curabitur scelerisque arcu a leo mollis porta. Ut eu quam ut odio tempor
  ornare.</p>
  </div>
</body>
</html>


Ce balisage apparaît comme suit dans Internet Explorer 10 :

La même petite sélection de texte justifié dans une boîte étroite comme dans la première image, avec la propriété -ms-hyphens définie sur ‘auto’ et la propriété -ms-hyphenate-limit-chars définie sur ‘auto 3’. Le mot « ultiricies », qui était auparavant coupé après deux caractères est désormais coupé et apparaît sur la ligne suivante

Notez que le mot « ultricies » apparaît sans coupure sur sa propre ligne.

Propriété -ms-hyphenate-limit-lines

La propriété -ms-hyphenate-limit-lines indique le nombre maximal de lignes coupées consécutives dans un élément. Sa syntaxe est indiquée ici :

PropriétéDescription

-ms-hyphenate-limit-lines

Spécifie le nombre maximal de lignes consécutives dans un élément pouvant se terminer par un mot coupé. Cette propriété peut être définie avec une valeur entière ou avec le mot clé no-limit, qui indique qu’il n’y a aucune limite au nombre de lignes consécutives pouvant se terminer par un mot coupé.

 

Informations de référence sur les API

-ms-hyphenate-limit-chars
-ms-hyphenate-limit-lines
-ms-hyphenate-limit-zone
-ms-hyphens

Démonstrations du site Internet Explorer Test Drive

Hands On: Multi-column Layout

Billets IEBlog

Création de pages riches en texte dans Internet Explorer 10

Spécification

CSS Text Module Level 3: Section 6

 

 

Afficher: