mdn/css/1_css_building_blocks/09_handling_different_text_directions

09_handling_different_text_directions

dz / mdn / css / 1_css_building_blocks / 09_handling_different_text_directions

Summary

Handling different text directions

Node Tree

Nodes

writing_modes
content Writing Modes
children inline_dimension, mapped_props_replace_physical, text_horiz_vert, writing_mode_prop, block_dimension, direction

text_horiz_vert
content Refers to whether text is running horizontally or vertically.
parents writing_modes

writing_mode_prop
content writing-mode property
children horizontal_tb, vertical_lr, vertical_rl
parents writing_modes

horizontal_tb
content horizontal-tb
parents writing_mode_prop

vertical_rl
content vertical-rl
parents writing_mode_prop

vertical_lr
content vertical-lr
parents writing_mode_prop

block_dimension
content Block Dimension: direction blocks are displayed in the writing mode
children inline_dimension (related), margin_block_start_margin_top, block_size_height
parents writing_modes

inline_dimension
content Inline Dimension: direction a sentence flows
children inline_size_width
parents block_dimension, writing_modes

direction
content Direction
children start_end_instead_of_LR_TB
parents writing_modes

start_end_instead_of_LR_TB
content start/end used in newer CSS instead of LR, TB
parents direction

mapped_props_replace_physical
content Mapped properties to replace physical properties
children horiz_writing_mode, logical_props_still_new, logical_relative_flow_versions, margin_block_start_margin_top, padding_left_padding_inline_start, phys_props, border_bottom_border_block_end
parents writing_modes

phys_props
content Physical Properties: width, height, etc
parents mapped_props_replace_physical

logical_relative_flow_versions
content Logical or Relative Flow versions
parents mapped_props_replace_physical

horiz_writing_mode
content Horizontal Writing Mode
children inline_size_width, block_size_height
parents mapped_props_replace_physical

inline_size_width
content inline-size -> width
parents horiz_writing_mode, inline_dimension

block_size_height
content block-size -> height
parents horiz_writing_mode, block_dimension

margin_block_start_margin_top
content margin-block-start -> margin->top
parents mapped_props_replace_physical, block_dimension

padding_left_padding_inline_start
content padding-left -> padding-inline-start
children applied_start_inline_direction
parents mapped_props_replace_physical

applied_start_inline_direction
content applied to start of inline direction
parents padding_left_padding_inline_start

border_bottom_border_block_end
content border-bottom -> border_block_end
parents mapped_props_replace_physical

logical_props_still_new
content Logical properties still relatively new
parents mapped_props_replace_physical