[{"data":1,"prerenderedAt":1045},["ShallowReactive",2],{"page-\u002Fcss\u002F16-logical-properties-and-writing-modes":3},{"id":4,"title":5,"body":6,"description":1038,"extension":1039,"meta":1040,"navigation":234,"path":1041,"seo":1042,"stem":1043,"__hash__":1044},"content\u002Fcss\u002F16-logical-properties-and-writing-modes.md","16 — Logical Properties & Writing Modes: i18n-Ready CSS",{"type":7,"value":8,"toc":1024},"minimark",[9,13,50,55,68,72,360,364,427,437,500,504,509,580,638,642,759,763,822,826,942,946,995,1020],[10,11,5],"h1",{"id":12},"_16-logical-properties-writing-modes-i18n-ready-css",[14,15,16,17,21,22,21,25,21,28,21,31,34,35,21,38,21,41,44,45,49],"p",{},"Physical properties (",[18,19,20],"code",{},"left",", ",[18,23,24],{},"right",[18,26,27],{},"top",[18,29,30],{},"bottom",[18,32,33],{},"width",") don't flip in RTL or vertical writing modes. Logical properties (",[18,36,37],{},"inline-start",[18,39,40],{},"block-start",[18,42,43],{},"inline-size",") are ",[46,47,48],"em",{},"flow-relative"," — they adapt to the writing direction automatically. Writing logical CSS from day one makes your code i18n-ready at zero cost.",[51,52,54],"h2",{"id":53},"the-logical-axes-inline-and-block","The Logical Axes — inline and block",[56,57,59],"code-wrapper",{"language":58},"text",[60,61,66],"pre",{"className":62,"code":64,"language":58,"meta":65},[63],"language-text","inline  = the writing direction (horizontal in LTR\u002FRTL, vertical in vertical-rl)\nblock   = the direction lines stack (top→bottom in horizontal, right→left in vertical-rl)\nstart   = beginning of the inline\u002Fblock axis\nend     = end of the inline\u002Fblock axis\n\nIn horizontal LTR:  inline = horizontal (→), block = vertical (↓)\n                      inline-start = left, inline-end = right, block-start = top, block-end = bottom\nIn horizontal RTL:  inline = horizontal (←), block = vertical (↓)\n                      inline-start = right, inline-end = left (FLIPPED)\nIn vertical-rl:     inline = vertical (↓), block = horizontal (←)\n                      inline-size = height, block-size = width (SWAPPED)\n","",[18,67,64],{"__ignoreMap":65},[51,69,71],{"id":70},"the-mapping-horizontal-ltr","The Mapping (horizontal LTR)",[56,73,75],{"language":74},"css",[60,76,79],{"className":77,"code":78,"language":74,"meta":65,"style":65},"language-css shiki shiki-themes github-light github-dark","\u002F* Physical → Logical (horizontal LTR) *\u002F\n.card {\n  margin-inline-start: 1rem;    \u002F* = margin-left in LTR, margin-right in RTL (auto-flip) *\u002F\n  padding-inline-end: 2rem;     \u002F* = padding-right in LTR, padding-left in RTL *\u002F\n  inset-inline-start: 0;        \u002F* = left: 0 in LTR, right: 0 in RTL (for positioning) *\u002F\n  inline-size: 300px;           \u002F* = width in horizontal, height in vertical *\u002F\n  block-size: 200px;            \u002F* = height in horizontal, width in vertical *\u002F\n  border-inline-start: 2px solid red;  \u002F* left border in LTR, right border in RTL *\u002F\n}\n\n\u002F* Shorthands *\u002F\n.box { margin-inline: 1rem; }       \u002F* both inline-start and inline-end *\u002F\n.box { margin-block: 2rem; }        \u002F* both block-start and block-end *\u002F\n.box { inset-inline: 0; }           \u002F* both inline insets *\u002F\n\n\u002F* Logical text-align *\u002F\n.text { text-align: start; }        \u002F* left in LTR, right in RTL *\u002F\n.text { text-align: end; }          \u002F* right in LTR, left in RTL *\u002F\n",[18,80,81,90,101,124,143,160,180,199,223,229,236,242,266,288,308,313,319,340],{"__ignoreMap":65},[82,83,86],"span",{"class":84,"line":85},"line",1,[82,87,89],{"class":88},"sdCPZ","\u002F* Physical → Logical (horizontal LTR) *\u002F\n",[82,91,93,97],{"class":84,"line":92},2,[82,94,96],{"class":95},"sIsaT",".card",[82,98,100],{"class":99},"ssxIu"," {\n",[82,102,104,108,111,114,118,121],{"class":84,"line":103},3,[82,105,107],{"class":106},"snvgF","  margin-inline-start",[82,109,110],{"class":99},": ",[82,112,113],{"class":106},"1",[82,115,117],{"class":116},"svdQ7","rem",[82,119,120],{"class":99},";    ",[82,122,123],{"class":88},"\u002F* = margin-left in LTR, margin-right in RTL (auto-flip) *\u002F\n",[82,125,127,130,132,135,137,140],{"class":84,"line":126},4,[82,128,129],{"class":106},"  padding-inline-end",[82,131,110],{"class":99},[82,133,134],{"class":106},"2",[82,136,117],{"class":116},[82,138,139],{"class":99},";     ",[82,141,142],{"class":88},"\u002F* = padding-right in LTR, padding-left in RTL *\u002F\n",[82,144,146,149,151,154,157],{"class":84,"line":145},5,[82,147,148],{"class":106},"  inset-inline-start",[82,150,110],{"class":99},[82,152,153],{"class":106},"0",[82,155,156],{"class":99},";        ",[82,158,159],{"class":88},"\u002F* = left: 0 in LTR, right: 0 in RTL (for positioning) *\u002F\n",[82,161,163,166,168,171,174,177],{"class":84,"line":162},6,[82,164,165],{"class":106},"  inline-size",[82,167,110],{"class":99},[82,169,170],{"class":106},"300",[82,172,173],{"class":116},"px",[82,175,176],{"class":99},";           ",[82,178,179],{"class":88},"\u002F* = width in horizontal, height in vertical *\u002F\n",[82,181,183,186,188,191,193,196],{"class":84,"line":182},7,[82,184,185],{"class":106},"  block-size",[82,187,110],{"class":99},[82,189,190],{"class":106},"200",[82,192,173],{"class":116},[82,194,195],{"class":99},";            ",[82,197,198],{"class":88},"\u002F* = height in horizontal, width in vertical *\u002F\n",[82,200,202,205,207,209,211,214,217,220],{"class":84,"line":201},8,[82,203,204],{"class":106},"  border-inline-start",[82,206,110],{"class":99},[82,208,134],{"class":106},[82,210,173],{"class":116},[82,212,213],{"class":106}," solid",[82,215,216],{"class":106}," red",[82,218,219],{"class":99},";  ",[82,221,222],{"class":88},"\u002F* left border in LTR, right border in RTL *\u002F\n",[82,224,226],{"class":84,"line":225},9,[82,227,228],{"class":99},"}\n",[82,230,232],{"class":84,"line":231},10,[82,233,235],{"emptyLinePlaceholder":234},true,"\n",[82,237,239],{"class":84,"line":238},11,[82,240,241],{"class":88},"\u002F* Shorthands *\u002F\n",[82,243,245,248,251,254,256,258,260,263],{"class":84,"line":244},12,[82,246,247],{"class":95},".box",[82,249,250],{"class":99}," { ",[82,252,253],{"class":106},"margin-inline",[82,255,110],{"class":99},[82,257,113],{"class":106},[82,259,117],{"class":116},[82,261,262],{"class":99},"; }       ",[82,264,265],{"class":88},"\u002F* both inline-start and inline-end *\u002F\n",[82,267,269,271,273,276,278,280,282,285],{"class":84,"line":268},13,[82,270,247],{"class":95},[82,272,250],{"class":99},[82,274,275],{"class":106},"margin-block",[82,277,110],{"class":99},[82,279,134],{"class":106},[82,281,117],{"class":116},[82,283,284],{"class":99},"; }        ",[82,286,287],{"class":88},"\u002F* both block-start and block-end *\u002F\n",[82,289,291,293,295,298,300,302,305],{"class":84,"line":290},14,[82,292,247],{"class":95},[82,294,250],{"class":99},[82,296,297],{"class":106},"inset-inline",[82,299,110],{"class":99},[82,301,153],{"class":106},[82,303,304],{"class":99},"; }           ",[82,306,307],{"class":88},"\u002F* both inline insets *\u002F\n",[82,309,311],{"class":84,"line":310},15,[82,312,235],{"emptyLinePlaceholder":234},[82,314,316],{"class":84,"line":315},16,[82,317,318],{"class":88},"\u002F* Logical text-align *\u002F\n",[82,320,322,325,327,330,332,335,337],{"class":84,"line":321},17,[82,323,324],{"class":95},".text",[82,326,250],{"class":99},[82,328,329],{"class":106},"text-align",[82,331,110],{"class":99},[82,333,334],{"class":106},"start",[82,336,284],{"class":99},[82,338,339],{"class":88},"\u002F* left in LTR, right in RTL *\u002F\n",[82,341,343,345,347,349,351,354,357],{"class":84,"line":342},18,[82,344,324],{"class":95},[82,346,250],{"class":99},[82,348,329],{"class":106},[82,350,110],{"class":99},[82,352,353],{"class":106},"end",[82,355,356],{"class":99},"; }          ",[82,358,359],{"class":88},"\u002F* right in LTR, left in RTL *\u002F\n",[51,361,363],{"id":362},"writing-modes","Writing Modes",[56,365,366],{"language":74},[60,367,369],{"className":77,"code":368,"language":74,"meta":65,"style":65},".vertical { writing-mode: vertical-rl; }   \u002F* vertical, right-to-left (Japanese\u002FChinese) *\u002F\n.vertical-lr { writing-mode: vertical-lr; } \u002F* vertical, left-to-right (Mongolian) *\u002F\n\u002F* horizontal-tb (default): horizontal, top-to-bottom. *\u002F\n\u002F* With vertical-rl: inline = vertical, block = horizontal. Logical properties adapt automatically;\n   physical properties (width, margin-left) DON'T — they're always physical. *\u002F\n",[18,370,371,392,412,417,422],{"__ignoreMap":65},[82,372,373,376,378,381,383,386,389],{"class":84,"line":85},[82,374,375],{"class":95},".vertical",[82,377,250],{"class":99},[82,379,380],{"class":106},"writing-mode",[82,382,110],{"class":99},[82,384,385],{"class":106},"vertical-rl",[82,387,388],{"class":99},"; }   ",[82,390,391],{"class":88},"\u002F* vertical, right-to-left (Japanese\u002FChinese) *\u002F\n",[82,393,394,397,399,401,403,406,409],{"class":84,"line":92},[82,395,396],{"class":95},".vertical-lr",[82,398,250],{"class":99},[82,400,380],{"class":106},[82,402,110],{"class":99},[82,404,405],{"class":106},"vertical-lr",[82,407,408],{"class":99},"; } ",[82,410,411],{"class":88},"\u002F* vertical, left-to-right (Mongolian) *\u002F\n",[82,413,414],{"class":84,"line":103},[82,415,416],{"class":88},"\u002F* horizontal-tb (default): horizontal, top-to-bottom. *\u002F\n",[82,418,419],{"class":84,"line":126},[82,420,421],{"class":88},"\u002F* With vertical-rl: inline = vertical, block = horizontal. Logical properties adapt automatically;\n",[82,423,424],{"class":84,"line":145},[82,425,426],{"class":88},"   physical properties (width, margin-left) DON'T — they're always physical. *\u002F\n",[51,428,430,433,434],{"id":429},"direction-and-unicode-bidi",[18,431,432],{},"direction"," and ",[18,435,436],{},"unicode-bidi",[56,438,439],{"language":74},[60,440,442],{"className":77,"code":441,"language":74,"meta":65,"style":65},"[dir=\"rtl\"] { direction: rtl; }   \u002F* sets the base direction (flips inline flow) *\u002F\nbdi { unicode-bidi: isolate; }    \u002F* isolate bidirectional text — LTR numbers in RTL flow *\u002F\n\u002F* unicode-bidi: isolate prevents embedded user content (names, numbers) from corrupting RTL flow. *\u002F\n",[18,443,444,474,495],{"__ignoreMap":65},[82,445,446,449,452,455,459,462,464,466,469,471],{"class":84,"line":85},[82,447,448],{"class":99},"[",[82,450,451],{"class":95},"dir",[82,453,454],{"class":116},"=",[82,456,458],{"class":457},"sJ6F3","\"rtl\"",[82,460,461],{"class":99},"] { ",[82,463,432],{"class":106},[82,465,110],{"class":99},[82,467,468],{"class":106},"rtl",[82,470,388],{"class":99},[82,472,473],{"class":88},"\u002F* sets the base direction (flips inline flow) *\u002F\n",[82,475,476,480,482,484,486,489,492],{"class":84,"line":92},[82,477,479],{"class":478},"sk71V","bdi",[82,481,250],{"class":99},[82,483,436],{"class":106},[82,485,110],{"class":99},[82,487,488],{"class":106},"isolate",[82,490,491],{"class":99},"; }    ",[82,493,494],{"class":88},"\u002F* isolate bidirectional text — LTR numbers in RTL flow *\u002F\n",[82,496,497],{"class":84,"line":103},[82,498,499],{"class":88},"\u002F* unicode-bidi: isolate prevents embedded user content (names, numbers) from corrupting RTL flow. *\u002F\n",[51,501,503],{"id":502},"the-mixing-trap-logical-physical-breaks-i18n","The Mixing Trap — logical + physical breaks i18n",[505,506,508],"h3",{"id":507},"anti-pattern-logical-padding-with-physical-positioning","Anti-pattern: logical padding with physical positioning",[56,510,511],{"language":74},[60,512,514],{"className":77,"code":513,"language":74,"meta":65,"style":65},"\u002F* ❌ padding flips (logical) but the icon doesn't (physical left) → in RTL, padding is on the right\n   but the icon is on the left. They get out of sync. *\u002F\n.card { padding-inline-start: 2.5rem; }\n.card .icon { position: absolute; left: 0.5rem; }  \u002F* physical — doesn't flip *\u002F\n",[18,515,516,521,526,545],{"__ignoreMap":65},[82,517,518],{"class":84,"line":85},[82,519,520],{"class":88},"\u002F* ❌ padding flips (logical) but the icon doesn't (physical left) → in RTL, padding is on the right\n",[82,522,523],{"class":84,"line":92},[82,524,525],{"class":88},"   but the icon is on the left. They get out of sync. *\u002F\n",[82,527,528,530,532,535,537,540,542],{"class":84,"line":103},[82,529,96],{"class":95},[82,531,250],{"class":99},[82,533,534],{"class":106},"padding-inline-start",[82,536,110],{"class":99},[82,538,539],{"class":106},"2.5",[82,541,117],{"class":116},[82,543,544],{"class":99},"; }\n",[82,546,547,549,552,554,557,559,562,565,567,569,572,574,577],{"class":84,"line":126},[82,548,96],{"class":95},[82,550,551],{"class":95}," .icon",[82,553,250],{"class":99},[82,555,556],{"class":106},"position",[82,558,110],{"class":99},[82,560,561],{"class":106},"absolute",[82,563,564],{"class":99},"; ",[82,566,20],{"class":106},[82,568,110],{"class":99},[82,570,571],{"class":106},"0.5",[82,573,117],{"class":116},[82,575,576],{"class":99},"; }  ",[82,578,579],{"class":88},"\u002F* physical — doesn't flip *\u002F\n",[56,581,582],{"language":74},[60,583,585],{"className":77,"code":584,"language":74,"meta":65,"style":65},"\u002F* ✓ Both logical → both flip together in RTL. *\u002F\n.card { padding-inline-start: 2.5rem; }\n.card .icon { position: absolute; inset-inline-start: 0.5rem; }  \u002F* logical — flips *\u002F\n",[18,586,587,592,608],{"__ignoreMap":65},[82,588,589],{"class":84,"line":85},[82,590,591],{"class":88},"\u002F* ✓ Both logical → both flip together in RTL. *\u002F\n",[82,593,594,596,598,600,602,604,606],{"class":84,"line":92},[82,595,96],{"class":95},[82,597,250],{"class":99},[82,599,534],{"class":106},[82,601,110],{"class":99},[82,603,539],{"class":106},[82,605,117],{"class":116},[82,607,544],{"class":99},[82,609,610,612,614,616,618,620,622,624,627,629,631,633,635],{"class":84,"line":103},[82,611,96],{"class":95},[82,613,551],{"class":95},[82,615,250],{"class":99},[82,617,556],{"class":106},[82,619,110],{"class":99},[82,621,561],{"class":106},[82,623,564],{"class":99},[82,625,626],{"class":106},"inset-inline-start",[82,628,110],{"class":99},[82,630,571],{"class":106},[82,632,117],{"class":116},[82,634,576],{"class":99},[82,636,637],{"class":88},"\u002F* logical — flips *\u002F\n",[51,639,641],{"id":640},"when-to-use-physical-the-exception","When to Use Physical (the exception)",[56,643,644],{"language":74},[60,645,647],{"className":77,"code":646,"language":74,"meta":65,"style":65},"\u002F* Physical properties are correct for effects that SHOULD'T flip: *\u002F\n.logo { inset-block-start: 1rem; inset-inline-start: 1rem; }  \u002F* always top-left, even in RTL *\u002F\n.shadow { box-shadow: 2px 2px 4px gray; }  \u002F* light direction is physical, not flow-relative *\u002F\n.gradient { background: linear-gradient(to right, red, blue); }  \u002F* visual direction, not reading direction *\u002F\n",[18,648,649,654,685,719],{"__ignoreMap":65},[82,650,651],{"class":84,"line":85},[82,652,653],{"class":88},"\u002F* Physical properties are correct for effects that SHOULD'T flip: *\u002F\n",[82,655,656,659,661,664,666,668,670,672,674,676,678,680,682],{"class":84,"line":92},[82,657,658],{"class":95},".logo",[82,660,250],{"class":99},[82,662,663],{"class":106},"inset-block-start",[82,665,110],{"class":99},[82,667,113],{"class":106},[82,669,117],{"class":116},[82,671,564],{"class":99},[82,673,626],{"class":106},[82,675,110],{"class":99},[82,677,113],{"class":106},[82,679,117],{"class":116},[82,681,576],{"class":99},[82,683,684],{"class":88},"\u002F* always top-left, even in RTL *\u002F\n",[82,686,687,690,692,695,697,699,701,704,706,709,711,714,716],{"class":84,"line":103},[82,688,689],{"class":95},".shadow",[82,691,250],{"class":99},[82,693,694],{"class":106},"box-shadow",[82,696,110],{"class":99},[82,698,134],{"class":106},[82,700,173],{"class":116},[82,702,703],{"class":106}," 2",[82,705,173],{"class":116},[82,707,708],{"class":106}," 4",[82,710,173],{"class":116},[82,712,713],{"class":106}," gray",[82,715,576],{"class":99},[82,717,718],{"class":88},"\u002F* light direction is physical, not flow-relative *\u002F\n",[82,720,721,724,726,729,731,734,737,740,743,745,748,750,753,756],{"class":84,"line":126},[82,722,723],{"class":95},".gradient",[82,725,250],{"class":99},[82,727,728],{"class":106},"background",[82,730,110],{"class":99},[82,732,733],{"class":106},"linear-gradient",[82,735,736],{"class":99},"(",[82,738,739],{"class":116},"to",[82,741,742],{"class":106}," right",[82,744,21],{"class":99},[82,746,747],{"class":106},"red",[82,749,21],{"class":99},[82,751,752],{"class":106},"blue",[82,754,755],{"class":99},"); }  ",[82,757,758],{"class":88},"\u002F* visual direction, not reading direction *\u002F\n",[51,760,762],{"id":761},"tips-tricks","💡 Tips & Tricks",[764,765,766,786,805,813],"ul",{},[767,768,769,773,774,21,777,21,779,781,782,785],"li",{},[770,771,772],"strong",{},"Idiom",": use logical properties (",[18,775,776],{},"margin-inline-start",[18,778,626],{},[18,780,43],{},") for ",[46,783,784],{},"all"," flow-relative layout — they flip automatically in RTL and vertical writing modes. The same CSS works for every language.",[767,787,788,110,790,793,794,796,797,793,799,801,802,804],{},[770,789,772],{},[18,791,792],{},"text-align: start","\u002F",[18,795,353],{}," (not ",[18,798,20],{},[18,800,24],{},") — ",[18,803,334],{}," is left in LTR, right in RTL. The logical equivalent for text alignment.",[767,806,807,110,809,812],{},[770,808,772],{},[18,810,811],{},"unicode-bidi: isolate"," on embedded user content (names, numbers) in bidirectional text — prevents LTR content from corrupting the RTL flow. Essential for user-generated content in international apps.",[767,814,815,817,818,821],{},[770,816,772],{},": keep physical properties for effects that ",[46,819,820],{},"shouldn't"," flip — a logo pinned top-left, a shadow's light direction, a decorative gradient direction. Logical = flow-relative; physical = absolute visual.",[51,823,825],{"id":824},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[764,827,828,838,864,883,905,926],{},[767,829,830,833,834,837],{},[770,831,832],{},"Mixing logical and physical breaks i18n",": one flips, the other doesn't → they get out of sync. Use logical ",[46,835,836],{},"consistently"," for flow-relative layout.",[767,839,840,853,854,856,857,21,859,856,861,863],{},[770,841,842,793,844,847,848,793,850],{},[18,843,33],{},[18,845,846],{},"height"," vs ",[18,849,43],{},[18,851,852],{},"block-size",": in horizontal mode, ",[18,855,43],{}," = ",[18,858,33],{},[18,860,852],{},[18,862,846],{},". In vertical mode, they swap. Mixing both in one rule is confusing.",[767,865,866,110,872,793,874,793,876,879,880,882],{},[770,867,868,871],{},[18,869,870],{},"direction: rtl"," doesn't flip physical properties",[18,873,20],{},[18,875,24],{},[18,877,878],{},"margin-left"," are always physical. Use logical properties or ",[18,881,451],{},"-specific overrides.",[767,884,885,896,897,21,899,901,902,904],{},[770,886,887,889,890,793,893],{},[18,888,380],{}," affects ",[18,891,892],{},"inline",[18,894,895],{},"block",": with ",[18,898,385],{},[18,900,892],{}," is vertical, ",[18,903,895],{}," is horizontal. Logical properties adapt; physical ones don't.",[767,906,907,110,913,21,916,919,920,856,923,925],{},[770,908,909,910],{},"Logical ",[18,911,912],{},"border-radius",[18,914,915],{},"border-start-start-radius",[18,917,918],{},"border-start-end-radius",", etc. — corners named by (block, inline). ",[18,921,922],{},"border-top-left-radius",[18,924,915],{}," in horizontal LTR.",[767,927,928,110,934,937,938,941],{},[770,929,930,933],{},[18,931,932],{},"inset"," shorthand is physical",[18,935,936],{},"inset: 0"," = all four physical sides. ",[18,939,940],{},"inset-inline: 0"," = both inline sides (logical). They're different shorthands.",[51,943,945],{"id":944},"spot-the-bug","🧠 Spot the Bug",[56,947,948],{"language":74},[60,949,951],{"className":77,"code":950,"language":74,"meta":65,"style":65},".card { padding-inline-start: 2.5rem; }\n.card .icon { position: absolute; left: 0.5rem; }\n",[18,952,953,969],{"__ignoreMap":65},[82,954,955,957,959,961,963,965,967],{"class":84,"line":85},[82,956,96],{"class":95},[82,958,250],{"class":99},[82,960,534],{"class":106},[82,962,110],{"class":99},[82,964,539],{"class":106},[82,966,117],{"class":116},[82,968,544],{"class":99},[82,970,971,973,975,977,979,981,983,985,987,989,991,993],{"class":84,"line":92},[82,972,96],{"class":95},[82,974,551],{"class":95},[82,976,250],{"class":99},[82,978,556],{"class":106},[82,980,110],{"class":99},[82,982,561],{"class":106},[82,984,564],{"class":99},[82,986,20],{"class":106},[82,988,110],{"class":99},[82,990,571],{"class":106},[82,992,117],{"class":116},[82,994,544],{"class":99},[996,997,998,1002],"details",{},[999,1000,1001],"summary",{},"Answer",[14,1003,1004,1006,1007,1010,1011,1013,1014,1017,1018,837],{},[18,1005,534],{}," is logical → flips to the right in RTL (correct, space for the icon). But ",[18,1008,1009],{},".icon { left: 0.5rem; }"," is physical → ",[18,1012,20],{}," is always the left side, even in RTL. In RTL, the padding is on the right (correct), but the icon is on the left (wrong — it should be on the right, where the padding is). They get out of sync. Fix: ",[18,1015,1016],{},"inset-inline-start: 0.5rem"," (logical) → flips with the padding. The lesson: mixing logical and physical properties breaks i18n — one flips, the other doesn't. Use logical ",[46,1019,836],{},[1021,1022,1023],"style",{},"html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}",{"title":65,"searchDepth":92,"depth":92,"links":1025},[1026,1027,1028,1029,1031,1034,1035,1036,1037],{"id":53,"depth":92,"text":54},{"id":70,"depth":92,"text":71},{"id":362,"depth":92,"text":363},{"id":429,"depth":92,"text":1030},"direction and unicode-bidi",{"id":502,"depth":92,"text":503,"children":1032},[1033],{"id":507,"depth":103,"text":508},{"id":640,"depth":92,"text":641},{"id":761,"depth":92,"text":762},{"id":824,"depth":92,"text":825},{"id":944,"depth":92,"text":945},"Inline\u002Fblock and start\u002Fend logical axes, logical equivalents for every physical property, writing-mode (vertical-rl for CJK), text-align:start, and the logical\u002Fphysical mixing trap. Code-first reference for RTL-ready production CSS.","md",{},"\u002Fcss\u002F16-logical-properties-and-writing-modes",{"title":5,"description":1038},"css\u002F16-logical-properties-and-writing-modes","M9DHutZ5XXfL46BAtKPEmN9NS9f3gX11XjtFcg8bnfE",1789924647483]