[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/ruby-position [Back]  [Original]

Proprit CSS ruby-position - CSS | MDN

Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.

View in English Always switch to English

Proprit CSS ruby-position

Baseline 2024 *
Nouvellement disponible

Depuis dcembre 2024, cette fonctionnalit fonctionne sur les appareils et les versions de navigateur les plus rcents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

* Certaines parties de cette fonctionnalit peuvent bnficier de prise en charge variables.

La proprit CSS ruby-position dfinit la position d'un lment ruby par rapport son lment de base. L'lment ruby peut ainsi tre positionn au-dessus de l'lment (over), en-dessous (under) ou entre les caractres, sur leur droite (inter-character).

Dans cet article

Exemple interactif

ruby-position: over;
ruby-position: under;
<section id="default-example">
  <ruby id="example-element">  <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
</section>
#example-element {
  font-size: 2em;
}

Syntaxe

css
/* Valeurs avec un mot-cl */
ruby-position: over;
ruby-position: under;
ruby-position: alternate;
ruby-position: alternate over;
ruby-position: alternate under;
ruby-position: inter-character;

/* Valeurs globales */
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: revert-layer;
ruby-position: unset;

Valeurs

Cette proprit est dfinie comme l'un des mots-cls suivants :

over

Exemple au-dessus [Exemple au-dessus] Est un mot-cl indiquant que le ruby doit tre plac au-dessus du texte principal pour les scripts horizontaux et droite pour les scripts verticaux.

under

Exemple en-dessous [Exemple en-dessous] Est un mot-cl indiquant que le ruby doit tre plac sous le texte principal pour les scripts horizontaux et gauche pour les scripts verticaux.

alternate

Est un mot-cl indiquant que le ruby alterne entre au-dessus et en-dessous, lorsqu'il y a plusieurs niveaux d'annotation.

inter-character

Lorsqu'il est dfini, il se comporte comme over dans les modes d'criture verticale. Sinon, il indique que le ruby doit tre plac entre les diffrents caractres, apparaissant droite de la base dans le texte horizontal et forant les enfants du conteneur d'annotation ruby avoir un mode d'criture vertical-rl.

Dfinition formelle

Valeur initialealternate
Applicabilitannotations ruby des conteneurs
Hriteoui
Valeur calculecomme dfini
Type d'animationdiscrte

Syntaxe formelle

ruby-position = 
[ alternate || [ over | under ] ] |
inter-character
Cette syntaxe reflte le dernier standard selon CSS Ruby Annotation Layout Module Level 1. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Ruby positionn au-dessus du texte

HTML

html
<ruby>
  <rb></rb>
  <rp></rp><rt></rt><rp></rp>
</ruby>

CSS

css
ruby {
  ruby-position: over;
}

Rsultat

Ruby positionn en-dessous du texte

HTML

html
<ruby>
  <rb></rb>
  <rp></rp><rt></rt><rp></rp>
</ruby>

CSS

css
ruby {
  ruby-position: under;
}

Rsultat

Ruby altern

HTML

html
<ruby>
  <rb>A</rb><rb>B</rb><rb>C</rb>
  <rtc>Above</rtc>
  <rtc>Below</rtc>
</ruby>

CSS

css
ruby {
  ruby-position: alternate; /* ceci est galement la valeur initiale */
}

Rsultat

Spcifications

Spcification
CSS Ruby Annotation Layout Module Level 1
# rubypos

Compatibilit des navigateurs

Voir aussi


Web Proxy Viewer  |  New URL  |  Original Page