Présentation de quatre nouvelles fonctionnalités internationales en CSS

Jack J
Jack J

Quatre nouvelles fonctionnalités CSS internationales issues du CSS Text Module Level 4 seront bientôt disponibles dans Chrome. Cet article explique ce qui a déjà été expédié et ce qui sera bientôt disponible.

  • À partir de Chrome 119: coupure de ligne de la phrase japonaise avec word-break: auto-phrase.
  • Derrière un flag de Chrome 120: espacement entre les scripts avec la propriété text-autospace.
  • En cours de développement: espacement des caractères de ponctuation en chinois, japonais et coréen (CJK) avec la propriété text-spacing-trim.
  • Taille de police minimale cohérente entre les langues.

Saut de ligne dans les expressions japonaises: word-break: auto-phrase

Cette fonctionnalité améliore la lisibilité du texte japonais et est disponible à partir de Chrome 119.

Certaines langues d'Asie de l'Est, comme le chinois ou le japonais, n'utilisent pas d'espaces pour séparer les mots. Les lignes peuvent se terminer à n'importe quel caractère, même au milieu d'un mot. Il s'agit du comportement normal de ces langues, mais dans les textes courts tels que les titres ou les poèmes, il est préférable de couper les lignes aux limites naturelles des phrases (en japonais, cette limite est appelée "Bunsetsu").

La nouvelle fonctionnalité CSS word-break: auto-phrase spécifie que le retour à la ligne doit se produire à ces limites.

<html lang="ja">
<style>
h1 {
  word-break: auto-phrase;
}
</style>

<h1>窓ぎわのトットちゃん<h1>
saut de mot: l&#39;expression automatique remet à la ligne la limite de l&#39;expression naturelle.
word-break: auto-phrase encapsule la ligne à la limite naturelle de la phrase.

La détection des limites est effectuée par un moteur de machine learning. Il est donc possible que le résultat ne corresponde pas à ce que vous souhaitez. Dans ce cas, vous pouvez ajuster manuellement les points de rupture. Une balise <wbr> ou un espace sans chasse (&ZeroWidthSpace;) applique un point de rupture, tandis qu'un liant sans chasse (&zwj;) empêche la rupture.

窓ぎわの<wbr>トットちゃん
ユーザー<wbr>インターフェース

Actuellement, cette fonctionnalité n'est disponible dans Chrome qu'en japonais, à l'aide du port BudouX C++ qui utilise la technologie ML AdaBoost. Pour en savoir plus, consultez Google Developers Japan: BudouX: 読みやすい改行のための軽量な分かち書き器.

Nous prévoyons de prendre en charge le coréen et le chinois dans les prochaines versions de Chrome.

Espacement entre les scripts: text-autospace

La fonctionnalité suivante est actuellement masquée derrière un indicateur dans Chrome. Pour le tester, activez le flag Experimental Web Platform features (Fonctionnalités expérimentales de la plate-forme Web) (chrome://flags/#enable-experimental-web-platform-features) dans Chrome 120 ou version ultérieure.

Le chinois et le japonais combinent plusieurs écritures, les chiffres Han, latins et ASCII, ainsi que les alphabets hiragana et katakana dans le cas du japonais. Les petits espaces entre les caractères lorsque vous passez d'un script idéographique non han à un autre ou inversement facilitent souvent la lisibilité.

Chrome prévoit d'insérer un espacement entre les scripts par défaut. Cette fonctionnalité apporte une pratique courante, largement utilisée dans les documents imprimés pour améliorer la lisibilité, sur le Web.

La nouvelle valeur par défaut applique de petits espaces pour une meilleure lisibilité, qui peuvent être contrôlés avec text-autospace.
La nouvelle valeur par défaut applique de petits espaces pour une meilleure lisibilité, qui peuvent être contrôlés avec text-autospace.

Si vous souhaitez désactiver ce comportement, la propriété text-autospace vous permet de contrôler l'insertion des espacements.

text-autospace: no-autospace;

Espacement des caractères de ponctuation CJK: text-spacing-trim

La fonctionnalité suivante est en cours de développement et devrait être activée par défaut dans Chrome.

En chinois, en japonais et en coréen, l'application d'un espacement entre les caractères de ponctuation améliore la lisibilité et produit une typographie plus agréable visuellement. La plupart des documents imprimés et des traitements de texte appliquent aujourd'hui ce kerning.

Par exemple, les points et les parenthèses fermantes CJK sont généralement conçus pour avoir des espaces internes aux glyphes dans la moitié droite des espaces des glyphes, de sorte que chaque caractère ait une avance constante.

Toutefois, lorsque ces caractères de ponctuation apparaissent sur une ligne, ces espaces internes aux glyphes deviennent excessifs. Dans les deux exemples suivants, le second est la typographie correcte. La moitié droite de la période CJK doit être supprimée.

Lorsque des signes de ponctuation apparaissent sur une ligne, la moitié droite du point CJK doit être supprimée.
Lorsque des signes de ponctuation apparaissent sur une ligne, la moitié droite du point CJK doit être supprimée.

Le comportement par défaut fournit généralement de bons résultats, mais les développeurs peuvent utiliser la propriété text-spacing-trim pour choisir différents styles ou pour la désactiver dans certains cas.

Taille de police minimale cohérente entre les langues

Avant Chrome 118, les tailles de police inférieures à 10 pixels environ n'étaient pas affichées comme spécifié, mais étaient arrondies si la langue était l'arabe, le farsi, le coréen, le japonais, le thaï, le chinois simplifié ou le chinois traditionnel. Les développeurs avaient besoin de solutions pour afficher du texte de petite taille, par exemple à l'aide de la propriété transform.

À partir de Chrome 118, cette limite est levée pour toutes les langues. Les sept langues correspondent donc aux autres. Cette modification améliore l'interopérabilité avec d'autres navigateurs.

À partir de Chrome 118, la limitation du rendu des polices de moins de 10 px comme spécifié est levée pour le chinois simplifié, traditionnel, le coréen, le farsi, le japonais, le thaï.
À partir de Chrome 118, la limitation selon laquelle les tailles de police inférieures à 10 pixels ne sont pas affichées comme spécifié est levée pour l'arabe, le farsi, le japonais, le coréen, le thaï, le chinois simplifié ou traditionnel.

Interagir et envoyer des commentaires

Si vous avez des commentaires sur ces fonctionnalités, veuillez les signaler sur crbug.com.