• Skip to main content
  • Skip to search
  • Skip to select language
MDN Web Docs
  • References
    • Overview / Web Technology

      Web technology reference for developers

    • HTML

      Structure of content on the web

    • CSS

      Code used to describe document style

    • JavaScript

      General-purpose scripting language

    • HTTP

      Protocol for transmitting web resources

    • Web APIs

      Interfaces for building web applications

    • Web Extensions

      Developing extensions for web browsers

    • Web Technology

      Web technology reference for developers

  • Guides
    • Overview / MDN Learning Area

      Learn web development

    • MDN Learning Area

      Learn web development

    • HTML

      Learn to structure web content with HTML

    • CSS

      Learn to style content using CSS

    • JavaScript

      Learn to run scripts in the browser

    • Accessibility

      Learn to make the web accessible to all

  • Plus
    • Overview

      A customized MDN experience

    • AI Help (beta)

      Get real-time assistance and support

    • Updates

      All browser compatibility updates at a glance

    • Documentation

      Learn how to use MDN Plus

    • FAQ

      Frequently asked questions about MDN Plus

  • CurriculumNew
  • Blog
  • Play
  • AI Help Beta
  • Log in
  • Sign up for free
  1. References
  2. CSS
  3. CSS ruby layout

In this article

  • Reference
  • Specifications
  • See also
  1. CSS
  2. Tutorials
  3. CSS basics
  4. 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. Assessment: Styling a biography page
  5. CSS building blocks
    1. CSS building blocks overview
    2. CSS selectors
    3. Type, class, and ID selectors
    4. Attribute selectors
    5. Pseudo-classes and pseudo-elements
    6. Combinators
    7. Cascade, specificity, and inheritance
    8. Cascade layers
    9. The box model
    10. Backgrounds and borders
    11. Handling different text directions
    12. Overflowing content
    13. CSS values and units
    14. Sizing items in CSS
    15. Images, media, and form elements
    16. Styling tables
    17. Debugging CSS
    18. Organizing your CSS
    19. Assessment: Fundamental CSS comprehension
    20. Assessment: Creating fancy letterheaded paper
    21. Assessment: A cool-looking box
  6. 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
  7. 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. Assessment: Fundamental layout comprehension
  8. Reference
  9. Modules
    1. CSS animations
    2. CSS backgrounds and borders
    3. CSS basic user interface
    4. CSS box alignment
    5. CSS box model
    6. CSS cascade and inheritance
    7. CSS custom properties for cascading variables
    8. CSS color adjustment
    9. CSS colors
    10. CSS compositing and blending
    11. CSS conditional rules
    12. CSS containment
    13. CSS counter styles
    14. CSS display
    15. CSS filter effects
    16. CSS flexible box layout
    17. CSS font loading
    18. CSS fonts
    19. CSS fragmentation
    20. CSS generated content
    21. CSS grid layout
    22. CSS images
    23. CSS lists and counters
    24. CSS logical properties and values
    25. CSS masking
    26. CSS media queries
    27. CSS miscellaneous
    28. CSS motion path
    29. CSS multi-column layout
    30. CSS namespaces
    31. CSS nesting
    32. CSS overflow
    33. CSS overscroll behavior
    34. CSS paged media
    35. CSS positioned layout
    36. CSS properties and values API
    37. CSS pseudo-elements
    38. CSS ruby layout
    39. CSS scoping
    40. CSS scroll-driven animations
    41. CSS scroll snap
    42. CSS scrollbars styling
    43. CSS selectors
    44. CSS shadow parts
    45. CSS shapes
    46. CSS syntax
    47. CSS table
    48. CSS text
    49. CSS text decoration
    50. CSS transforms
    51. CSS transitions
    52. CSS writing modes
    53. CSSOM view
  10. Properties
    1. -moz-*
      1. -moz-float-edge Non-standard Deprecated
      2. -moz-force-broken-image-icon Non-standard Deprecated
      3. -moz-image-region Non-standard
      4. -moz-orient Non-standard
      5. -moz-user-focus Non-standard Deprecated
      6. -moz-user-input Non-standard Deprecated
    2. -webkit-*
      1. -webkit-border-before Non-standard
      2. -webkit-box-reflect Non-standard
      3. -webkit-line-clamp
      4. -webkit-mask-box-image Non-standard
      5. -webkit-mask-composite Non-standard
      6. -webkit-mask-position-x Non-standard
      7. -webkit-mask-position-y Non-standard
      8. -webkit-mask-repeat-x Non-standard
      9. -webkit-mask-repeat-y Non-standard
      10. -webkit-overflow-scrolling Non-standard
      11. -webkit-tap-highlight-color Non-standard
      12. -webkit-text-fill-color
      13. -webkit-text-security Non-standard
      14. -webkit-text-stroke
      15. -webkit-text-stroke-color
      16. -webkit-text-stroke-width
      17. -webkit-touch-callout Non-standard
    3. accent-color
    4. align-*
      1. align-content
      2. align-items
      3. align-self
      4. align-tracks Experimental
    5. all
    6. animation-*
      1. animation
      2. animation-composition
      3. animation-delay
      4. animation-direction
      5. animation-duration
      6. animation-fill-mode
      7. animation-iteration-count
      8. animation-name
      9. animation-play-state
      10. animation-range Experimental
      11. animation-range-end Experimental
      12. animation-range-start Experimental
      13. animation-timeline Experimental
      14. animation-timing-function
    7. appearance
    8. aspect-ratio
    9. backdrop-filter
    10. backface-visibility
    11. background-*
      1. background
      2. background-attachment
      3. background-blend-mode
      4. background-clip
      5. background-color
      6. background-image
      7. background-origin
      8. background-position
      9. background-position-x
      10. background-position-y
      11. background-repeat
      12. background-size
    12. block-size
    13. border-*
      1. border
      2. border-block
      3. border-block-color
      4. border-block-end
      5. border-block-end-color
      6. border-block-end-style
      7. border-block-end-width
      8. border-block-start
      9. border-block-start-color
      10. border-block-start-style
      11. border-block-start-width
      12. border-block-style
      13. border-block-width
      14. border-bottom
      15. border-bottom-color
      16. border-bottom-left-radius
      17. border-bottom-right-radius
      18. border-bottom-style
      19. border-bottom-width
      20. border-collapse
      21. border-color
      22. border-end-end-radius
      23. border-end-start-radius
      24. border-image
      25. border-image-outset
      26. border-image-repeat
      27. border-image-slice
      28. border-image-source
      29. border-image-width
      30. border-inline
      31. border-inline-color
      32. border-inline-end
      33. border-inline-end-color
      34. border-inline-end-style
      35. border-inline-end-width
      36. border-inline-start
      37. border-inline-start-color
      38. border-inline-start-style
      39. border-inline-start-width
      40. border-inline-style
      41. border-inline-width
      42. border-left
      43. border-left-color
      44. border-left-style
      45. border-left-width
      46. border-radius
      47. border-right
      48. border-right-color
      49. border-right-style
      50. border-right-width
      51. border-spacing
      52. border-start-end-radius
      53. border-start-start-radius
      54. border-style
      55. border-top
      56. border-top-color
      57. border-top-left-radius
      58. border-top-right-radius
      59. border-top-style
      60. border-top-width
      61. border-width
    14. bottom
    15. box-*
      1. box-align Non-standard Deprecated
      2. box-decoration-break
      3. box-direction Non-standard Deprecated
      4. box-flex Non-standard Deprecated
      5. box-flex-group Non-standard Deprecated
      6. box-lines Non-standard Deprecated
      7. box-ordinal-group Non-standard Deprecated
      8. box-orient Non-standard Deprecated
      9. box-pack Non-standard Deprecated
      10. box-shadow
      11. box-sizing
    16. break-*
      1. break-after
      2. break-before
      3. break-inside
    17. caption-side
    18. caret-color
    19. clear
    20. clip Deprecated
    21. clip-path
    22. color-*
      1. color
      2. color-interpolation
      3. color-scheme
    23. column-*
      1. column-count
      2. column-fill
      3. column-gap
      4. column-rule
      5. column-rule-color
      6. column-rule-style
      7. column-rule-width
      8. column-span
      9. column-width
    24. columns
    25. contain-*
      1. contain
      2. contain-intrinsic-block-size
      3. contain-intrinsic-height
      4. contain-intrinsic-inline-size
      5. contain-intrinsic-size
      6. contain-intrinsic-width
    26. container-*
      1. container
      2. container-name
      3. container-type
    27. content
    28. content-visibility Experimental
    29. counter-*
      1. counter-increment
      2. counter-reset
      3. counter-set
    30. cursor
    31. direction
    32. display
    33. empty-cells
    34. filter
    35. flex-*
      1. flex
      2. flex-basis
      3. flex-direction
      4. flex-flow
      5. flex-grow
      6. flex-shrink
      7. flex-wrap
    36. float
    37. font-*
      1. font
      2. font-family
      3. font-feature-settings
      4. font-kerning
      5. font-language-override
      6. font-optical-sizing
      7. font-palette
      8. font-size
      9. font-size-adjust
      10. font-smooth Non-standard
      11. font-stretch
      12. font-style
      13. font-synthesis
      14. font-synthesis-position
      15. font-synthesis-small-caps
      16. font-synthesis-style
      17. font-synthesis-weight
      18. font-variant
      19. font-variant-alternates
      20. font-variant-caps
      21. font-variant-east-asian
      22. font-variant-emoji
      23. font-variant-ligatures
      24. font-variant-numeric
      25. font-variant-position
      26. font-variation-settings
      27. font-weight
    38. forced-color-adjust
    39. gap
    40. grid-*
      1. grid
      2. grid-area
      3. grid-auto-columns
      4. grid-auto-flow
      5. grid-auto-rows
      6. grid-column
      7. grid-column-end
      8. grid-column-start
      9. grid-row
      10. grid-row-end
      11. grid-row-start
      12. grid-template
      13. grid-template-areas
      14. grid-template-columns
      15. grid-template-rows
    41. hanging-punctuation
    42. height
    43. hyphenate-character
    44. hyphenate-limit-chars
    45. hyphens
    46. image-*
      1. image-orientation
      2. image-rendering
      3. image-resolution Experimental
    47. initial-letter Experimental
    48. initial-letter-align Experimental
    49. inline-size
    50. inset-*
      1. inset
      2. inset-block
      3. inset-block-end
      4. inset-block-start
      5. inset-inline
      6. inset-inline-end
      7. inset-inline-start
    51. isolation
    52. justify-*
      1. justify-content
      2. justify-items
      3. justify-self
      4. justify-tracks Experimental
    53. left
    54. letter-spacing
    55. line-*
      1. line-break
      2. line-height
      3. line-height-step Experimental
    56. list-*
      1. list-style
      2. list-style-image
      3. list-style-position
      4. list-style-type
    57. margin-*
      1. margin
      2. margin-block
      3. margin-block-end
      4. margin-block-start
      5. margin-bottom
      6. margin-inline
      7. margin-inline-end
      8. margin-inline-start
      9. margin-left
      10. margin-right
      11. margin-top
      12. margin-trim Experimental
    58. mask-*
      1. mask
      2. mask-border
      3. mask-border-mode
      4. mask-border-outset
      5. mask-border-repeat
      6. mask-border-slice
      7. mask-border-source
      8. mask-border-width
      9. mask-clip
      10. mask-composite
      11. mask-image
      12. mask-mode
      13. mask-origin
      14. mask-position
      15. mask-repeat
      16. mask-size
      17. mask-type
    59. masonry-auto-flow Experimental
    60. math-*
      1. math-depth
      2. math-shift Experimental
      3. math-style
    61. max-*
      1. max-block-size
      2. max-height
      3. max-inline-size
      4. max-width
    62. min-*
      1. min-block-size
      2. min-height
      3. min-inline-size
      4. min-width
    63. mix-blend-mode
    64. object-fit
    65. object-position
    66. offset-*
      1. offset
      2. offset-anchor
      3. offset-distance
      4. offset-path
      5. offset-position
      6. offset-rotate
    67. opacity
    68. order
    69. orphans
    70. outline-*
      1. outline
      2. outline-color
      3. outline-offset
      4. outline-style
      5. outline-width
    71. overflow-*
      1. overflow
      2. overflow-anchor
      3. overflow-block
      4. overflow-clip-margin
      5. overflow-inline
      6. overflow-wrap
      7. overflow-x
      8. overflow-y
    72. overlay Experimental
    73. overscroll-*
      1. overscroll-behavior
      2. overscroll-behavior-block
      3. overscroll-behavior-inline
      4. overscroll-behavior-x
      5. overscroll-behavior-y
    74. padding-*
      1. padding
      2. padding-block
      3. padding-block-end
      4. padding-block-start
      5. padding-bottom
      6. padding-inline
      7. padding-inline-end
      8. padding-inline-start
      9. padding-left
      10. padding-right
      11. padding-top
    75. page-*
      1. page
      2. page-break-after
      3. page-break-before
      4. page-break-inside
    76. paint-order
    77. perspective
    78. perspective-origin
    79. place-*
      1. place-content
      2. place-items
      3. place-self
    80. pointer-events
    81. position
    82. print-color-adjust
    83. quotes
    84. resize
    85. right
    86. rotate
    87. row-gap
    88. ruby-align Experimental
    89. ruby-position
    90. scale
    91. scroll-*
      1. scroll-behavior
      2. scroll-margin
      3. scroll-margin-block
      4. scroll-margin-block-end
      5. scroll-margin-block-start
      6. scroll-margin-bottom
      7. scroll-margin-inline
      8. scroll-margin-inline-end
      9. scroll-margin-inline-start
      10. scroll-margin-left
      11. scroll-margin-right
      12. scroll-margin-top
      13. scroll-padding
      14. scroll-padding-block
      15. scroll-padding-block-end
      16. scroll-padding-block-start
      17. scroll-padding-bottom
      18. scroll-padding-inline
      19. scroll-padding-inline-end
      20. scroll-padding-inline-start
      21. scroll-padding-left
      22. scroll-padding-right
      23. scroll-padding-top
      24. scroll-snap-align
      25. scroll-snap-stop
      26. scroll-snap-type
      27. scroll-timeline Experimental
      28. scroll-timeline-axis Experimental
      29. scroll-timeline-name Experimental
    92. scrollbar-*
      1. scrollbar-color
      2. scrollbar-gutter
      3. scrollbar-width
    93. shape-*
      1. shape-image-threshold
      2. shape-margin
      3. shape-outside
    94. tab-size
    95. table-layout
    96. text-*
      1. text-align
      2. text-align-last
      3. text-combine-upright
      4. text-decoration
      5. text-decoration-color
      6. text-decoration-line
      7. text-decoration-skip Experimental
      8. text-decoration-skip-ink
      9. text-decoration-style
      10. text-decoration-thickness
      11. text-emphasis
      12. text-emphasis-color
      13. text-emphasis-position
      14. text-emphasis-style
      15. text-indent
      16. text-justify
      17. text-orientation
      18. text-overflow
      19. text-rendering
      20. text-shadow
      21. text-size-adjust Experimental
      22. text-transform
      23. text-underline-offset
      24. text-underline-position
      25. text-wrap
      26. text-wrap-mode
      27. text-wrap-style
    97. timeline-scope Experimental
    98. top
    99. touch-action
    100. transform-*
      1. transform
      2. transform-box
      3. transform-origin
      4. transform-style
    101. transition-*
      1. transition
      2. transition-behavior
      3. transition-delay
      4. transition-duration
      5. transition-property
      6. transition-timing-function
    102. translate
    103. unicode-bidi
    104. user-modify Non-standard Deprecated
    105. user-select
    106. vertical-align
    107. view-*
      1. view-timeline Experimental
      2. view-timeline-axis Experimental
      3. view-timeline-inset Experimental
      4. view-timeline-name Experimental
      5. view-transition-name Experimental
    108. visibility
    109. white-space
    110. white-space-collapse
    111. widows
    112. width
    113. will-change
    114. word-break
    115. word-spacing
    116. writing-mode
    117. z-index
    118. zoom Non-standard
  11. Selectors
    1. Attribute selectors
    2. Class selectors
    3. ID selectors
    4. & nesting selector
    5. Type selectors
    6. Universal selectors
  12. Combinators
    1. Child combinator
    2. Column combinator Experimental
    3. Descendant combinator
    4. Namespace separator
    5. Next-sibling combinator
    6. Selector list
    7. Subsequent-sibling combinator
  13. Pseudo-classes
    1. :-moz-broken Non-standard
    2. :-moz-drag-over Non-standard
    3. :-moz-first-node Non-standard
    4. :-moz-handler-blocked Non-standard
    5. :-moz-handler-crashed Non-standard
    6. :-moz-handler-disabled Non-standard
    7. :-moz-last-node Non-standard
    8. :-moz-loading Non-standard
    9. :-moz-locale-dir(ltr) Non-standard
    10. :-moz-locale-dir(rtl) Non-standard
    11. :-moz-only-whitespace Non-standard
    12. :-moz-submit-invalid Non-standard
    13. :-moz-suppressed Non-standard
    14. :-moz-user-disabled Non-standard
    15. :-moz-window-inactive Non-standard
    16. :active
    17. :any-link
    18. :autofill
    19. :blank Experimental
    20. :buffering
    21. :checked
    22. :current
    23. :default
    24. :defined
    25. :dir()
    26. :disabled
    27. :empty
    28. :enabled
    29. :first
    30. :first-child
    31. :first-of-type
    32. :focus
    33. :focus-visible
    34. :focus-within
    35. :fullscreen
    36. :future
    37. :has()
    38. :host
    39. :host-context()
    40. :host()
    41. :hover
    42. :in-range
    43. :indeterminate
    44. :invalid
    45. :is()
    46. :lang()
    47. :last-child
    48. :last-of-type
    49. :left
    50. :link
    51. :local-link
    52. :modal
    53. :muted
    54. :not()
    55. :nth-child()
    56. :nth-last-child()
    57. :nth-last-of-type()
    58. :nth-of-type()
    59. :only-child
    60. :only-of-type
    61. :optional
    62. :out-of-range
    63. :past
    64. :paused
    65. :picture-in-picture
    66. :placeholder-shown
    67. :playing
    68. :popover-open
    69. :read-only
    70. :read-write
    71. :required
    72. :right
    73. :root
    74. :scope
    75. :seeking
    76. :stalled
    77. :state() Experimental
    78. :target
    79. :target-within Experimental
    80. :user-invalid
    81. :user-valid
    82. :valid
    83. :visited
    84. :volume-locked
    85. :where()
  14. Pseudo-elements
    1. ::-moz-color-swatch Non-standard
    2. ::-moz-focus-inner Experimental
    3. ::-moz-list-bullet Non-standard
    4. ::-moz-list-number Non-standard
    5. ::-moz-page Non-standard
    6. ::-moz-page-sequence Non-standard
    7. ::-moz-progress-bar Non-standard
    8. ::-moz-range-progress Non-standard
    9. ::-moz-range-thumb Non-standard
    10. ::-moz-range-track Non-standard
    11. ::-moz-scrolled-page-sequence Non-standard
    12. ::-webkit-inner-spin-button Non-standard
    13. ::-webkit-meter-bar Non-standard
    14. ::-webkit-meter-even-less-good-value Non-standard
    15. ::-webkit-meter-inner-element Non-standard
    16. ::-webkit-meter-optimum-value Non-standard
    17. ::-webkit-meter-suboptimum-value Non-standard
    18. ::-webkit-progress-bar Non-standard
    19. ::-webkit-progress-inner-element Non-standard
    20. ::-webkit-progress-value Non-standard
    21. ::-webkit-scrollbar Non-standard
    22. ::-webkit-search-cancel-button Non-standard
    23. ::-webkit-search-results-button Non-standard
    24. ::-webkit-slider-runnable-track Experimental
    25. ::-webkit-slider-thumb Experimental
    26. ::after
    27. ::backdrop
    28. ::before
    29. ::cue
    30. ::cue-region
    31. ::file-selector-button
    32. ::first-letter
    33. ::first-line
    34. ::grammar-error
    35. ::highlight()
    36. ::marker
    37. ::part()
    38. ::placeholder
    39. ::selection
    40. ::slotted()
    41. ::spelling-error
    42. ::target-text Experimental
    43. ::view-transition Experimental
    44. ::view-transition-group Experimental
    45. ::view-transition-image-pair Experimental
    46. ::view-transition-new Experimental
    47. ::view-transition-old Experimental
  15. At-rules
    1. @charset
    2. @color-profile
    3. @container
    4. @counter-style
    5. @document Non-standard Deprecated
    6. @font-face
    7. @font-feature-values
    8. @font-palette-values
    9. @import
    10. @keyframes
    11. @layer
    12. @media
    13. @namespace
    14. @page
    15. @property
    16. @scope
    17. @starting-style Experimental
    18. @supports
  16. Functions
    1. -moz-image-rect Non-standard Deprecated
    2. abs()
    3. acos()
    4. asin()
    5. atan()
    6. atan2()
    7. attr()
    8. calc()
    9. clamp()
    10. cos()
    11. counter()
    12. counters()
    13. cross-fade()
    14. element() Experimental
    15. env()
    16. exp()
    17. fit-content()
    18. hypot()
    19. log()
    20. max()
    21. min()
    22. minmax()
    23. mod()
    24. path()
    25. pow()
    26. ray()
    27. rem()
    28. repeat()
    29. round()
    30. sign()
    31. sin()
    32. sqrt()
    33. symbols()
    34. tan()
    35. url()
    36. var()
  17. Types
    1. <absolute-size>
    2. <alpha-value>
    3. <angle>
    4. <angle-percentage>
    5. <basic-shape>
    6. <blend-mode>
    7. <box-edge>
    8. <calc-constant>
    9. <calc-sum>
    10. <color-interpolation-method>
    11. <color>
    12. <custom-ident>
    13. <dashed-ident>
    14. <dimension>
    15. <display-box>
    16. <display-inside>
    17. <display-internal>
    18. <display-legacy>
    19. <display-listitem>
    20. <display-outside>
    21. <easing-function>
    22. <filter-function>
    23. <flex>
    24. <frequency>
    25. <frequency-percentage>
    26. <generic-family>
    27. <gradient>
    28. <hex-color>
    29. <hue>
    30. <hue-interpolation-method>
    31. <ident>
    32. <image>
    33. <integer>
    34. <length>
    35. <length-percentage>
    36. <line-style>
    37. <named-color>
    38. <number>
    39. <overflow>
    40. <percentage>
    41. <position>
    42. <ratio>
    43. <relative-size>
    44. <resolution>
    45. <shape> Deprecated
    46. <string>
    47. <system-color>
    48. <time>
    49. <time-percentage>
    50. <transform-function>
  18. Guides
  19. Animations
    1. Using CSS animations
  20. Backgrounds and Borders
    1. Using multiple backgrounds
    2. Resizing background images
  21. 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
  22. Box model
    1. Introduction to the CSS basic box model
    2. Mastering margin collapsing
  23. Colors
    1. Applying color to HTML elements using CSS
    2. Web Accessibility: Understanding colors and luminance
    3. Web Accessibility: Color contrast
  24. Columns
    1. Basic concepts of Multicol
    2. Styling columns
    3. Spanning and balancing
    4. Handling overflow in Multicol
    5. Content breaks in Multicol
  25. Conditional rules
    1. Using feature queries
  26. Containment
    1. Using CSS containment
    2. CSS container queries
    3. Using container size and style queries
  27. CSSOM view
    1. Coordinate systems
  28. 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
  29. 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
  30. Fonts
    1. OpenType font features guide
    2. Variable fonts guide
  31. 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
  32. Images
    1. Using CSS gradients
  33. Lists and counters
    1. Using CSS counters
    2. Consistent list indentation
  34. Logical properties
    1. Basic concepts
    2. Floating and positioning
    3. Margins, borders and padding
    4. Sizing
  35. Math functions
    1. Using CSS math functions
  36. Media queries
    1. Using media queries
    2. Using media queries for accessibility
    3. Testing media queries programmatically
    4. Printing
  37. Nesting style rules
    1. Using CSS nesting
    2. Nesting at-rules
    3. Nesting and specificity
  38. Positioning
    1. Understanding CSS z-index
  39. Scroll snap
    1. Basic concepts of scroll snap
  40. Shapes
    1. Overview of shapes
    2. Shapes from box values
    3. Basic shapes
    4. Shapes from images
  41. Text
    1. Wrapping and breaking text
  42. Transforms
    1. Using transforms
  43. Transitions
    1. Using transitions
  44. 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
  46. Tools
    1. Color picker
    2. Box shadow generator
    3. Border image generator
    4. Border radius generator

In this article

  • Reference
  • Specifications
  • See also

CSS ruby layout

The CSS ruby layout module provides the rendering model and formatting controls related to the display of ruby annotation. Ruby annotation is a form of interlinear annotation, consisting of short runs of text alongside the base text. They are typically used in East Asian documents to indicate pronunciation or to provide a short annotation.

Reference

Properties

  • ruby-align
  • ruby-position

Specifications

Specification
CSS Ruby Annotation Layout Module Level 1

See also

  • <ruby>

Help improve MDN

Learn how to contribute.

This page was last modified on Feb 7, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content
CSS ruby layout by Mozilla Contributors is licensed under CC-BY-SA 2.5.