ruby-align - Propriété CSS
Résumé des caractéristiques de la propriété ruby-align
space-around | space-between | center | startspace-aroundruby-align passe d'une valeur à l'autre sans transition.Schéma syntaxique de ruby-align.
ruby-alignLes 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 les annotations Ruby. Mais voici trois exemples de code HTML qui permettent d'afficher des annotation Ruby.
Une annotation Ruby
unique
Des annotations Ruby successives (syntaxe 1)
Des annotations Ruby successives (syntaxe 2)
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.北 ☎ 📱 - ruby-align: center;
Texte et annotation sont centrés dans le conteneur Ruby.
北 ☎ 📱 - 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.
北 ☎ 📱 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-justifyla valeurinter-character.北北 AA - 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.
北 ☎ 📱 - ruby-align:
initial; ruby-align:inherit; ruby-align:revert; ruby-align:revert-layer; ruby-align:unset;La valeur initiale est :
space-around
Simulateur.
Le simulateur montre l'effet de la propriété ruby-align sur les annotations Ruby, pour deux syntaxes HTML différentes.
Prise en charge par les navigateurs (compatibilité).
ruby-align.
ruby-alignNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que ruby-align.
Les spécifications CSS éditées par le W3C sont organisées en modules. ruby-align fait partie du Module CSS - Annotations Ruby (CSS Ruby Annotation Layout Module). Les définitions suivantes sont également décrites dans ce même module.