Les annotations ruby

Description.

Les annotations Ruby sont des textes en petits caractères inscrits à côté ou au dessus du texte principal. Elles sont surtout utilisées dans les langues CJK pour indiquer par exemple une phonétique.

Exemple d'annotation Ruby

Néanmoins dans les exemples qui suivent, nous avons utilisé la notation Ruby avec des textes en français. C'est inhabituel sans doute, mais cela permettra au lecteur de ne pas être perturbé par les glyphes des caractères asiatiques.

Ruby et HTML5.

HTML5 comporte toutes des balises nécessaires pour restituer la présentation Ruby :

ruby : container Ruby.
rb : délimite le texte de base. Cette balise peut même être omise.
rt : délimite l'annotation.
rp : caractère marquant le début et/ou la fin du texte d'annotation. Utile uniquement pour les navigateurs qui ne reconnaissent pas la notation Ruby.
rbc ✗ : définit un container pour plusieurs textes de base.
Obsolète. Seule la balise rb figure encore dans la norme.
rtc ✗ : définit un container pouvant recevoir plusieurs textes d'annotation.
Obsolète. Il faut utiliser maintenant la balise rt dans tous les cas de figure.

Premier exemple. C'est le cas le plus simple : on n'utilise que les balises ruby, rb et rt, afin de délimiter le container, les texte principal et le texte d'annotation.
Il est même possible de ne pas préciser la balise rb, tout le texte inclus dans un élément ruby étant par défaut considéré comme étant du texte principal. Cependant, cette simplification n'est pas recommandée car il ne sera alors plus difficile d'appliquer des styles CSS au texte principal.


	‹ruby›
	   ‹rb›TEXTE‹/rb›
	   ‹rt›Annotation‹/rt›
	‹/ruby›

TEXTEAnnotation

La balise rp peut être ajoutée. Elle sera ignorée par les navigateurs qui traitent la notation Ruby, mais, sur les navigateurs qui ne traient pas Ruby, elle permet d'introduire un caractère au début et à la fin de l'annotation.


	‹ruby›
	   ‹rb›TEXTE‹/rb›
	   ‹rp›(‹/rp›
	   ‹rt›Annotation‹/rt›
	   ‹rp›)‹/rp›
	‹/ruby›

TEXTEAnnotation

Sur un navigateur compatible

TEXTE (Annotation)

Sur un navigateur qui
ne reconnaît pas la notation Ruby

Ruby et CSS.

Les propriétés CSS habituelles peuvent bien entendu être utilisées pour présenter les annotations Ruby, comme on le voit dans l'exemple ci-après.


	‹ruby›
		‹rb›TEXTE‹/rb›
		‹rt›Annotation‹/rt›
	‹/ruby›

TEXTEAnnotation

Mais il existe des propriétés spécifiques aux annotations Ruby :

ruby-align : Définit l'alignement des textes dans une syntaxe ruby.
ruby-merge : Décrit comment doivent être alignées les annotations ruby lorsque plusieurs se suivent sur une même ligne.
ruby-overhang : Gère le débordement des annotations dans une présentention ruby.
ruby-position : Définit la position de l'annotation ruby par rapport à la base.

La propriété `display`.

La propriété display permet de définir n'importe quel élément comme étant un container Ruby ou un élément d'une structure Ruby. Néanmoins, si le document est du HTML, il est préférable d'utiliser les balises prédéfinies de HTML (voir plus haut).

display:ruby; définit un élément comme étant un container Ruby.
display:ruby-base; définit un élément comme étant le texte principal d'une structure Ruby.
display:ruby-text; définit un élément comme étant le texte d'annotation d'une structure Ruby.
display:ruby-base-container; ✗ définit un élément comme étant un container de plusieurs textes principaux dans une structure Ruby.
display:ruby-text-container; ✗ définit un élément comme étant un container de plusieurs textes d'annotation dans une structure Ruby.

Prise en charge par les navigateurs (compatibilité).

A l'heure actuelle (2023), les annotation Ruby et les différentes propriétés CSS qui permettent de les mettre en forme, ne sont que partiellement prise en charge par les navigateurs. Reportez vous aux propriétés individuelles pour plus de détails.

Colonne 1

Support générale des annotations ruby et des propriétés qui s'y rapportent.