ruby-position
Quick Summary for ruby-position
The
ruby-position
CSS property defines the position of a ruby element relatives to its base element. It can be positioned over the element (over
), under it (under
), or between the characters on their right side (inter-character
).
Code Usage for ruby-position
/* Keyword values */ ruby-position: over; ruby-position: under; ruby-position: inter-character; ruby-position: alternate; /* Global values */ ruby-position: inherit; ruby-position: initial; ruby-position: revert; ruby-position: unset;
More Details for ruby-position
ruby-position
The ruby-position
CSS property defines the position of a ruby element relatives to its base element. It can be positioned over the element (over
), under it (under
), or between the characters on their right side (inter-character
).
Syntax
/* Keyword values */ ruby-position: over; ruby-position: under; ruby-position: inter-character; ruby-position: alternate; /* Global values */ ruby-position: inherit; ruby-position: initial; ruby-position: revert; ruby-position: unset;
Values
over
Is a keyword indicating that the ruby has to be placed over the main text for horizontal scripts and right to it for vertical scripts.
under
Is a keyword indicating that the ruby has to be placed under the main text for horizontal scripts and left to it for vertical scripts.
inter-character
Is a keyword indicating that the ruby has to be placed between the different characters.
alternate
Is a keyword indicating that the ruby alternates between over and under, when there are multiple levels of annotation.
Formal definition
Initial value | alternate |
---|---|
Applies to | ruby annotations containers |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
[ alternate || [ over | under ] ] | inter-character
Examples
Ruby positioned over the text
HTML<ruby> <rb>超電磁砲</rb> <rp>(</rp><rt>レールガン</rt><rp>)</rp> </ruby>
CSS ruby { ruby-position:over; }
ResultRuby positioned under the text
HTML<ruby> <rb>超電磁砲</rb> <rp>(</rp><rt>レールガン</rt><rp>)</rp> </ruby>
CSS ruby { ruby-position:under; }
ResultRuby alternate
HTML<ruby> <rb>A<rb>B<rb>C</rb> <rtc>Above</rtc> <rtc>Below</rtc> </ruby>
CSS ruby { ruby-position: alternate; /* this is also the initial value */ }
ResultSpecifications
Specification |
---|
CSS Ruby Annotation Layout Module Level 1 # rubypos |
See also
HTML Ruby elements:<ruby>
, <rt>
, <rp>
, and <rtc>
. CSS Ruby properties: ruby-align
, ruby-merge
. Select your preferred language English (US)Français日本語正體中文 (繁體) Change language
Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline