Ruby-align - Propriété CSS

ruby-align

Résumé des caractéristiques de la propriété `ruby-align`

Description rapide

Définit l'alignement des textes dans une syntaxe ruby.

Statut

Problèmes de compatibilité ⚠

Utilisable sur

HTML

Valeurs prédéfinies

space-around | space-between | center | start

Pourcentages

Ne s'appliquent pas.

Valeur initiale

space-around

Héritée par défaut

Oui.

Type d'animation

Discrète : lors d'une animation, la propriété ruby-align passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Annotations Ruby

Références (W3C)

CSS Ruby Annotation Layout Module Level 1

Statut du document: WD (document de travail)

Schéma syntaxique de `ruby-align`.

Schéma syntaxique de la propriété ruby-align
Les liens du schéma donnent accès à plus de détails

Description.

La propriété ruby-align définit comment doivent s'aligner les éléments d'un conteneur Ruby, y compris lorsque plusieurs éléments Ruby sont successifs.

Une annotations Ruby est composée d'un texte principal et de l'annotation proprement dite. Dans nos exemples ci-dessous, le texte principal est un caractère graphique (téléphone, fax, etc.). Les annotations sont inscrites au dessus, avec une taille de police plus petite.

Les annotations Ruby sont principalement utilisées dans les écritures CJK mais rien n'empêche de s'en servir pour d'autres usages. Pour une présentation complète des annotations Ruby, reportez-vous à la page sur les annotations Ruby. Mais voici trois exemples de code HTML qui permettent d'afficher des annotation Ruby.

📞Tel
Une annotation Ruby
unique

📞 📠 @Tel Fax Mail
Des annotations Ruby successives (syntaxe 1)

📞Tel 📠 Fax @Mail
Des annotations Ruby successives (syntaxe 2)


	ruby
	   rb📞/rbrtTel/rt
	/ruby


	ruby
	   rb📞 📠 @/rb    
	   rtTel Fax Mail/rt
	/ruby


	ruby
	   rb📞/rbrtTel/rt
	   rb📠/rbrtFax/rt
	   rb@/rbrtMail/rt
	/ruby

Syntaxes pour `ruby-align`.

ruby-align: start;

Texte et annotation sont alignés sur le début du conteneur Ruby. Pour les langues latines (écriture de gauche à droite ltr) l'alignement se fera sur la gauche, et pour les langues arabes (rtl) il se fera sur la droite.

北běi ☎ 📱Fixe et mobile
ruby-align: center;

Texte et annotation sont centrés dans le conteneur Ruby.

北běi ☎ 📱Fixe et mobile
ruby-align: space-between;

Des espaces sont ajoutés entre les mots du texte ou les mots de l'annotation pour étirer ces informations sur toute la largeur du conteneur Ruby. Entre le texte et l'annotation, c'est le plus court des deux qui est ajusté, l'autre élément étant inchangé. Si l'annotation ou le texte ne comporte qu'un seul mot, ou même qu'un seul caractère, cette option est équivalente à un centrage.

北běi ☎ 📱Fixe et mobile

Remarque : pour que le positionnement soit correct avec des caractères non CJK, ces derniers doivent être séparés par un espace. Les caractères CJK par contre peuvent être ajustés à la largeur du conteneur même sans espace entre eux. Ceci peut être compensé en affectant à la propriété text-justify la valeur inter-character.

北北Caractères CJK AACaractères latins
ruby-align: space-around;

Des espaces sont ajoutés avant, après, et entre les mots de l'annotation ou du texte (le plus court de ces deux éléments) de façon à répartir le contenu sur le conteneur Ruby.

Les caractères CJK se positionnent plus facilement que ceux des langues latines. Voir la remarque ci-dessus.

北běi ☎ 📱Fixe et mobile

Valeurs communes à toutes les propriétés :


ruby-align: initial  (space-around)
ruby-align: inherit
ruby-align: revert
ruby-align: revertLayer
ruby-align: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété `ruby-align`.

Le simulateur montre l'effet de la propriété ruby-align sur les annotations Ruby, pour deux syntaxes HTML différentes.

ruby-align :

space-around

space-between

center

start

📞Tel 📱Mobile ✉Mail

📞 📱 ✉Tel Mobile Mail


	ruby
	   rb📞/rbrtTel/rt
	   rb📱/rbrtMovile/rt
	   rb✉/rbrtMail/rt
	/ruby


	ruby
	   rb📞 📱 ✉/rbrtTel Mobile Mail/rt
	/ruby

Prise en charge par les navigateurs (compatibilité).

Colonne 1

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

Colonne 2

Support de la propriété ruby-align pour aligner les annotations par rapport à leur texte de base

Remarques :

(1) Internet Explorer supporte les propriétés d'une ancienne spécification.

Annotations
Ruby

Propriété
ruby-align

Estimation de la prise en charge globale.

82%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `ruby-align`.

Module CSS - Annotations Ruby - Niveau 1

Présentation de la propriété ruby-align.

16 Février 2001
Document de travail.

Voir aussi, au sujet de Ruby.

Les spécifications concernant le Ruby, comme ruby-align, sont regroupées dans le module CSS Ruby Annotation Layout Module. Les définitions suivantes sont également décrites dans ce module.

Propriétés :

⚠

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.