• Skip to main content
  • Skip to search
    • Technologies Overview
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs
    • Browser Extensions
    • MathML
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
    • Send Feedback
    • Contribute to MDN
    • Report a content issue 🌐
    • Report a platform issue 🌐
  1. Technologies web pour développeurs
  2. CSS : Feuilles de style en cascade
  3. CSS Ruby
  • Change language
  • View in English

Table of contents

  • Référence
  • Spécifications

CSS Ruby

CSS Ruby Layout est un module CSS qui fournit des propriétés de contrôle pour le rendu et la mise en forme des annotations Ruby utilisées dans les documents d'Asie orientale afin d'indiquer la prononciation ou d'annoter le texte de base.

Référence

Propriétés

  • ruby-align
  • ruby-position

Spécifications

Spécification État Commentaires
CSS Ruby Layout Module Level 1 Version de travail Définition initiale.

Found a problem with this page?

  • Source on GitHub
  • Report a problem with this content on GitHub
  • Want to fix the problem yourself? See our Contribution guide.

Last modified: Apr 17, 2021, by MDN contributors

Change your language

Related Topics

  1. Learn CSS
  2. CSS first steps
    1. CSS first steps overview
    2. What is CSS?
    3. Getting started with CSS
    4. How CSS is structured
    5. How CSS works
    6. Using your new knowledge
  3. CSS building blocks
    1. CSS building blocks overview
    2. Cascade and inheritance
    3. CSS selectors
    4. The box model
    5. Backgrounds and borders
    6. Handling different text directions
    7. Overflowing content
    8. Values and units
    9. Sizing items in CSS
    10. Images, media, and form elements (en-US)
    11. Styling tables
    12. Debugging CSS
    13. Organizing your CSS (en-US)
  4. Styling text
    1. Styling text overview
    2. Fundamental text and font styling
    3. Styling lists
    4. Styling links
    5. Web fonts
    6. Assessment: Typesetting a community school homepage
  5. CSS layout
    1. CSS layout overview
    2. Introduction to CSS layout
    3. Normal Flow
    4. Flexbox
    5. Grids
    6. Floats
    7. Positioning
    8. Multiple-column Layout
    9. Responsive design
    10. Beginner's guide to media queries
    11. Legacy Layout Methods
    12. Supporting Older Browsers
    13. Fundamental Layout Comprehension
  6. Reference
  7. Modules
    1. Compositing and Blending
    2. CSS Animations
    3. CSS Backgrounds and Borders
    4. CSS Basic User Interface
    5. CSS Basic Box Model
    6. CSS Charsets
    7. CSS Color
    8. CSS Multi-column Layout
    9. CSS Conditional Rules
    10. CSS Counter Styles
    11. CSS Device Adaptation
    12. CSS Display
    13. CSS Flexible Box Layout
    14. CSS Fonts
    15. CSS Fragmentation
    16. CSS Generated Content
    17. CSS Grid Layout
    18. This is an experimental API that should not be used in production code. CSS Houdini (en-US)
    19. CSS Images
    20. CSS Lists
    21. CSS Logical Properties and Values
    22. CSS Masking
    23. CSS Miscellaneous
    24. This is an experimental API that should not be used in production code. CSS Motion Path
    25. CSS Namespaces
    26. CSS Paged Media
    27. CSS Positioned Layout
    28. CSS Ruby Layout
    29. CSS Scroll Snap Points
    30. CSS Scroll Snap
    31. CSS Scrollbars
    32. CSS selectors
    33. CSS Shapes
    34. CSS Table
    35. CSS Text Decoration
    36. CSS Text
    37. CSS Transforms
    38. CSS Transitions
    39. CSS data types
    40. CSS Custom Properties for Cascading Variables
    41. CSS Writing Modes
    42. CSSOM View
    43. Filter Effects
    44. Media queries
    45. Pseudo-classes
    46. Pseudo-elements
    47. CSS reference
  8. Properties
    1. align-content
    2. align-items
    3. align-self
    4. all
    5. animation-delay
    6. animation-direction
    7. animation-duration
    8. animation-fill-mode
    9. animation-iteration-count
    10. animation-name
    11. animation-play-state
    12. animation-timing-function
    13. animation
    14. appearance (-moz-appearance, -webkit-appearance)
    15. aspect-ratio (en-US)
    16. backdrop-filter
    17. backface-visibility
    18. background-attachment
    19. background-blend-mode
    20. background-clip
    21. background-color
    22. background-image
    23. background-origin
    24. This is an experimental API that should not be used in production code. background-position-x
    25. This is an experimental API that should not be used in production code. background-position-y
    26. background-position
    27. background-repeat
    28. background-size
    29. background
    30. This is an experimental API that should not be used in production code. block-size
    31. This is an experimental API that should not be used in production code. border-block-color
    32. This is an experimental API that should not be used in production code. border-block-end-color
    33. This is an experimental API that should not be used in production code. border-block-end-style
    34. This is an experimental API that should not be used in production code. border-block-end-width
    35. This is an experimental API that should not be used in production code. border-block-end
    36. This is an experimental API that should not be used in production code. border-block-start-color
    37. This is an experimental API that should not be used in production code. border-block-start-style
    38. This is an experimental API that should not be used in production code. border-block-start-width
    39. This is an experimental API that should not be used in production code. border-block-start
    40. This is an experimental API that should not be used in production code. border-block-width
    41. border-bottom-color
    42. border-bottom-left-radius
    43. border-bottom-right-radius
    44. border-bottom-style
    45. border-bottom-width
    46. border-bottom
    47. border-collapse
    48. border-color
    49. This is an experimental API that should not be used in production code. border-end-end-radius
    50. This is an experimental API that should not be used in production code. border-end-start-radius
    51. border-image-outset
    52. border-image-repeat
    53. border-image-slice
    54. border-image-source
    55. border-image-width
    56. border-image
    57. This is an experimental API that should not be used in production code. border-inline-color
    58. This is an experimental API that should not be used in production code. border-inline-end-color
    59. This is an experimental API that should not be used in production code. border-inline-end-style
    60. This is an experimental API that should not be used in production code. border-inline-end-width
    61. This is an experimental API that should not be used in production code. border-inline-end
    62. This is an experimental API that should not be used in production code. border-inline-start-color
    63. This is an experimental API that should not be used in production code. border-inline-start-style
    64. This is an experimental API that should not be used in production code. border-inline-start-width
    65. This is an experimental API that should not be used in production code. border-inline-start
    66. This is an experimental API that should not be used in production code. border-inline-style
    67. This is an experimental API that should not be used in production code. border-inline-width
    68. This is an experimental API that should not be used in production code. border-inline
    69. border-left-color
    70. border-left-style
    71. border-left-width
    72. border-left
    73. border-radius
    74. border-right-color
    75. border-right-style
    76. border-right-width
    77. border-right
    78. border-spacing
    79. This is an experimental API that should not be used in production code. border-start-end-radius
    80. This is an experimental API that should not be used in production code. border-start-start-radius
    81. border-style
    82. border-top-color
    83. border-top-left-radius
    84. border-top-right-radius
    85. border-top-style
    86. border-top-width
    87. border-top
    88. border-width
    89. bottom
    90. This is an experimental API that should not be used in production code. box-decoration-break
    91. box-shadow
    92. box-sizing
    93. break-after
    94. break-before
    95. break-inside
    96. caption-side
    97. caret-color
    98. clear
    99. This is an experimental API that should not be used in production code. clip-path
    100. Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner. clip
    101. color-scheme (en-US)
    102. color
    103. column-count
    104. column-fill
    105. column-gap (grid-column-gap)
    106. column-rule-color
    107. column-rule-style
    108. column-rule-width
    109. column-rule
    110. column-span
    111. column-width
    112. columns
    113. contain
    114. content-visibility (en-US)
    115. content
    116. counter-increment
    117. counter-reset
    118. counter-set
    119. cursor
    120. direction
    121. display
    122. empty-cells
    123. filter
    124. flex-basis
    125. flex-direction
    126. flex-flow
    127. flex-grow
    128. flex-shrink
    129. flex-wrap
    130. flex
    131. float
    132. font-family
    133. font-feature-settings
    134. font-kerning
    135. font-language-override
    136. font-optical-sizing
    137. font-size-adjust
    138. font-size
    139. font-stretch
    140. font-style
    141. font-synthesis
    142. font-variant-alternates
    143. font-variant-caps
    144. font-variant-east-asian
    145. font-variant-ligatures
    146. font-variant-numeric
    147. font-variant-position
    148. font-variant
    149. font-variation-settings
    150. font-weight
    151. font
    152. forced-color-adjust (en-US)
    153. gap (grid-gap)
    154. grid-area
    155. grid-auto-columns
    156. grid-auto-flow
    157. grid-auto-rows
    158. grid-column-end
    159. grid-column-start
    160. grid-column
    161. grid-row-end
    162. grid-row-start
    163. grid-row
    164. grid-template-areas
    165. grid-template-columns
    166. grid-template-rows
    167. grid-template
    168. grid
    169. This is an experimental API that should not be used in production code. hanging-punctuation
    170. height
    171. hyphens
    172. This is an experimental API that should not be used in production code. image-orientation
    173. image-rendering
    174. This is an experimental API that should not be used in production code. image-resolution (en-US)
    175. Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner. ime-mode
    176. This is an experimental API that should not be used in production code. initial-letter-align
    177. This is an experimental API that should not be used in production code. initial-letter
    178. inline-size
    179. This is an experimental API that should not be used in production code. inset-block-end
    180. This is an experimental API that should not be used in production code. inset-block-start
    181. This is an experimental API that should not be used in production code. inset-block
    182. This is an experimental API that should not be used in production code. inset-inline-end
    183. This is an experimental API that should not be used in production code. inset-inline-start
    184. This is an experimental API that should not be used in production code. inset-inline
    185. This is an experimental API that should not be used in production code. inset
    186. isolation
    187. justify-content
    188. justify-items
    189. justify-self
    190. left
    191. letter-spacing
    192. line-break
    193. line-height-step
    194. line-height
    195. list-style-image
    196. list-style-position
    197. list-style-type
    198. list-style
    199. This is an experimental API that should not be used in production code. margin-block-end
    200. This is an experimental API that should not be used in production code. margin-block-start
    201. This is an experimental API that should not be used in production code. margin-block
    202. margin-bottom
    203. This is an experimental API that should not be used in production code. margin-inline-end
    204. This is an experimental API that should not be used in production code. margin-inline-start
    205. This is an experimental API that should not be used in production code. margin-inline
    206. margin-left
    207. margin-right
    208. margin-top
    209. This is an experimental API that should not be used in production code. margin-trim
    210. margin
    211. This is an experimental API that should not be used in production code. mask-border-mode
    212. This is an experimental API that should not be used in production code. mask-border-outset
    213. This is an experimental API that should not be used in production code. mask-border-repeat
    214. This is an experimental API that should not be used in production code. mask-border-slice
    215. This is an experimental API that should not be used in production code. mask-border-source
    216. This is an experimental API that should not be used in production code. mask-border-width
    217. This is an experimental API that should not be used in production code. mask-border
    218. This is an experimental API that should not be used in production code. mask-clip
    219. This is an experimental API that should not be used in production code. mask-composite
    220. This is an experimental API that should not be used in production code. mask-image
    221. This is an experimental API that should not be used in production code. mask-mode
    222. This is an experimental API that should not be used in production code. mask-origin
    223. This is an experimental API that should not be used in production code. mask-position
    224. This is an experimental API that should not be used in production code. mask-repeat
    225. This is an experimental API that should not be used in production code. mask-size
    226. mask-type
    227. mask
    228. This is an experimental API that should not be used in production code. max-block-size
    229. max-height
    230. This is an experimental API that should not be used in production code. max-inline-size
    231. max-width
    232. This is an experimental API that should not be used in production code. min-block-size
    233. min-height
    234. This is an experimental API that should not be used in production code. min-inline-size
    235. min-width
    236. mix-blend-mode
    237. object-fit
    238. object-position
    239. This is an experimental API that should not be used in production code. offset-distance
    240. This is an experimental API that should not be used in production code. offset-position
    241. This is an experimental API that should not be used in production code. offset-rotate
    242. This is an experimental API that should not be used in production code. offset
    243. opacity
    244. order
    245. orphans
    246. outline-color
    247. outline-offset
    248. outline-style
    249. outline-width
    250. outline
    251. overflow-anchor
    252. overflow-block
    253. overflow-clip-margin (en-US)
    254. overflow-inline
    255. overflow-wrap
    256. overflow-x
    257. overflow-y
    258. overflow
    259. overscroll-behavior-block (en-US)
    260. overscroll-behavior-inline (en-US)
    261. overscroll-behavior-x
    262. overscroll-behavior-y
    263. overscroll-behavior
    264. This is an experimental API that should not be used in production code. padding-block-end
    265. This is an experimental API that should not be used in production code. padding-block-start
    266. padding-bottom
    267. This is an experimental API that should not be used in production code. padding-inline-end
    268. This is an experimental API that should not be used in production code. padding-inline-start
    269. padding-left
    270. padding-right
    271. padding-top
    272. padding
    273. page-break-after
    274. page-break-before
    275. page-break-inside
    276. perspective-origin
    277. perspective
    278. place-content
    279. place-items
    280. place-self
    281. pointer-events
    282. position
    283. quotes
    284. resize
    285. right
    286. rotate
    287. row-gap (grid-row-gap)
    288. ruby-align
    289. ruby-position
    290. scale
    291. scroll-behavior
    292. scroll-margin-bottom
    293. scroll-margin-inline-start
    294. scroll-margin-inline
    295. scroll-margin-left
    296. scroll-margin-right
    297. scroll-margin-top
    298. scroll-padding-block-end
    299. scroll-padding-block-start
    300. scroll-padding-bottom
    301. scroll-padding-inline-end
    302. scroll-padding-inline-start
    303. scroll-padding-inline
    304. scroll-padding-left
    305. scroll-padding
    306. Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner. scroll-snap-coordinate
    307. Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner. scroll-snap-destination
    308. Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner. scroll-snap-points-x
    309. Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner. scroll-snap-points-y
    310. scroll-snap-type
    311. scrollbar-color
    312. scrollbar-width
    313. shape-image-threshold
    314. shape-margin
    315. shape-outside
    316. tab-size
    317. table-layout
    318. This is an experimental API that should not be used in production code. text-align-last
    319. text-align
    320. This is an experimental API that should not be used in production code. text-combine-upright
    321. text-decoration-color
    322. text-decoration-line
    323. This is an experimental API that should not be used in production code. text-decoration-skip-ink
    324. This is an experimental API that should not be used in production code. text-decoration-skip
    325. text-decoration-style
    326. text-decoration
    327. text-emphasis-color
    328. text-emphasis-position
    329. text-emphasis-style
    330. text-emphasis
    331. text-indent
    332. text-justify
    333. text-orientation
    334. text-overflow
    335. text-rendering
    336. text-shadow
    337. This is an experimental API that should not be used in production code. text-size-adjust
    338. text-transform
    339. text-underline-position
    340. top
    341. touch-action
    342. This is an experimental API that should not be used in production code. transform-box
    343. transform-origin
    344. This is an experimental API that should not be used in production code. transform-style
    345. transform
    346. transition-delay
    347. transition-duration
    348. transition-property
    349. transition-timing-function
    350. transition
    351. translate
    352. unicode-bidi
    353. user-select
    354. vertical-align
    355. visibility
    356. white-space
    357. widows
    358. width
    359. will-change
    360. word-break
    361. word-spacing
    362. writing-mode
    363. z-index
  9. Selectors
    1. Adjacent sibling combinator
    2. Attribute selectors
    3. Child combinator
    4. Class selectors
    5. This is an experimental API that should not be used in production code. Column combinator
    6. Descendant combinator
    7. General sibling combinator
    8. ID selectors
    9. Selector list
    10. Type selectors
    11. Universal selectors
  10. Pseudo-classes
    1. :active
    2. This is an experimental API that should not be used in production code. :any-link
    3. :autofill
    4. This is an experimental API that should not be used in production code. :blank
    5. :checked
    6. :default
    7. :defined
    8. This is an experimental API that should not be used in production code. :dir()
    9. :disabled
    10. :empty
    11. :enabled
    12. :first-child
    13. :first-of-type
    14. :first
    15. :focus-visible
    16. :focus-within
    17. :focus
    18. :fullscreen
    19. This is an experimental API that should not be used in production code. :has()
    20. This is an experimental API that should not be used in production code. :host-context()
    21. :host()
    22. :host
    23. :hover
    24. :in-range
    25. :indeterminate
    26. :invalid
    27. This is an experimental API that should not be used in production code. :is() (:matches(), :any())
    28. :lang()
    29. :last-child
    30. :last-of-type
    31. :left
    32. :link
    33. :not()
    34. :nth-child()
    35. :nth-last-child()
    36. :nth-last-of-type()
    37. :nth-of-type()
    38. :only-child
    39. :only-of-type
    40. :optional
    41. :out-of-range
    42. :paused (en-US)
    43. :picture-in-picture (en-US)
    44. :placeholder-shown
    45. :playing (en-US)
    46. :read-only
    47. :read-write
    48. :required
    49. :right
    50. :root
    51. :scope
    52. This is an experimental API that should not be used in production code. :state() (en-US)
    53. :target
    54. :valid
    55. :visited
    56. This is an experimental API that should not be used in production code. :where()
    57. Privacy and the :visited selector
    58. Pseudo-classes
  11. Pseudo-elements
    1. ::after (:after)
    2. ::backdrop
    3. ::before (:before)
    4. ::cue-region
    5. ::cue
    6. ::first-letter (:first-letter)
    7. ::first-line (:first-line)
    8. This is an experimental API that should not be used in production code. ::grammar-error
    9. This is an experimental API that should not be used in production code. ::marker
    10. This is an experimental API that should not be used in production code. ::part()
    11. ::placeholder
    12. ::selection
    13. ::slotted()
    14. This is an experimental API that should not be used in production code. ::spelling-error
    15. ::target-text (en-US)
    16. Pseudo-elements
  12. At-rules
    1. @charset
    2. @color-profile (en-US)
    3. @counter-style
    4. @document
    5. @font-face
    6. @font-feature-values
    7. @import
    8. @keyframes
    9. @media
    10. @namespace
    11. @page
    12. @property (en-US)
    13. @supports
    14. This is an experimental API that should not be used in production code. @viewport
  13. Types
    1. <alpha-value>
    2. <angle-percentage>
    3. <angle>
    4. <basic-shape>
    5. <blend-mode>
    6. <color>
    7. CSS Functional Notation (en-US)
    8. CSS data types
    9. <custom-ident>
    10. <dimension>
    11. <display-box>
    12. <display-inside>
    13. <display-internal>
    14. <display-legacy>
    15. <display-listitem>
    16. <display-outside>
    17. <easing-function>
    18. <filter-function>
    19. <flex>
    20. <frequency-percentage>
    21. <frequency>
    22. <gradient>
    23. ident (en-US)
    24. <image>
    25. <integer>
    26. <length-percentage>
    27. <length>
    28. <number>
    29. <percentage>
    30. <position>
    31. <ratio>
    32. <resolution>
    33. Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner. <shape>
    34. <string>
    35. <time-percentage>
    36. <time>
    37. <transform-function>
    38. <translation-value>
  14. Guides
  15. Animations
    1. Using CSS animations
  16. Backgrounds and Borders
    1. Using multiple backgrounds
    2. Resizing background images
  17. Box alignment
    1. Box alignment in block layout
    2. Box alignment in flexbox
    3. Box alignment in grid layout
    4. Box alignment in multi-column layout
  18. Box model
    1. Introduction to the CSS basic box model (en-US)
    2. Mastering margin collapsing
  19. Columns
    1. Basic concepts of Multicol
    2. Styling columns
    3. Spanning and balancing
    4. Handling overflow in Multicol
    5. Content breaks in Multicol
  20. Conditional rules
    1. Using feature queries
  21. CSSOM view
    1. Coordinate systems
  22. Flexbox
    1. Basic concepts of Flexbox
    2. Comparison with other layout methods
    3. Aligning items in a flex container
    4. Ordering flex items
    5. Controlling flex item ratios
    6. Mastering wrapping of flex items
    7. Typical use cases of Flexbox
    8. Backwards compatibility of Flexbox
  23. Flow layout
    1. Block and Inline layout in normal flow
    2. In flow and Out of flow
    3. Formatting contexts explained
    4. Flow layout and writing modes
    5. Flow layout and overflow
  24. Fonts
    1. OpenType font features guide
    2. Variable fonts guide
  25. Grid
    1. Basics concepts of grid layout
    2. Relationship to other layout methods
    3. Line-based placement
    4. Grid template areas
    5. Layout using named grid lines
    6. Auto-placement in grid layout
    7. Box alignment in grid layout
    8. Grids, logical values and writing modes
    9. Grid layout and accessibility
    10. Grid Layout and progressive enhancement
    11. Realizing common layouts using grids
    12. Subgrid
    13. Masonry layout (en-US)
  26. Images
    1. Using CSS gradients
  27. Lists and counters
    1. Using CSS counters
    2. Consistent list indentation
  28. Logical properties
    1. Basic concepts
    2. Floating and positioning
    3. Margins, borders and padding
    4. Sizing
  29. Media queries
    1. Using media queries
    2. Using media queries for accessibility
    3. Testing media queries programmatically
  30. Positioning
    1. Understanding CSS z-index
  31. Scroll snap
    1. Basic concepts of scroll snap
    2. Browser compatibility and scroll snap
  32. Shapes
    1. Overview of shapes
    2. Shapes from box values
    3. Basic shapes
    4. Shapes from images
  33. Text
    1. Wrapping and breaking text (en-US)
  34. Transforms
    1. Using transforms
  35. Transitions
    1. Using transitions
  36. Layout cookbook
    1. Media objects
    2. Columns
    3. Center an element
    4. Sticky footers
    5. Split navigation
    6. Breadcrumb navigation
    7. List group with badges
    8. Pagination
    9. Card
    10. Grid wrapper
  38. Tools
    1. Color picker
    2. Box shadow generator
    3. Border image generator
  • Web Technologies
  • Learn Web Development
  • About MDN
  • Feedback
  • About
  • MDN Web Docs Store
  • Contact Us
  • Firefox

MDN

Mozilla

© 2005-2021 Mozilla and individual contributors. Content is available under these licenses.

  • Terms
  • Privacy
  • Cookies