LESSON-11 · TOPIC 03
能用 inset-inline-end/inset-block-start 讓角落 badge 隨 LTR/RTL 書寫方向翻轉。
能用 inset-inline-end/inset-block-start 讓角落 badge 隨 LTR/RTL 書寫方向翻轉。
固定 right/top 把版面綁在左到右假設；logical properties 能讓同一元件支援不同語言方向。
要修改的檔案：files/starter/style.css
定位：先讀 document/card 的 dir 與 writing-mode，再看 logical inset computed value。｜依 starter-3 定位，只修改「logical inset」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
阿拉伯文頁面的推薦 badge 仍固定在右上角，沒有跟著閱讀方向移到左上角。
起始狀態：卡片 position:relative；badge absolute，inline-end 從 0px 基準開始。
runtime inset-inline-end 由 0px 變16px；required facts 顯示 LTR 靠右、RTL 靠左。
驗收證據：現有 runtime before=0px、after=16px；required facts 包含 ltrOffset、rtlOffset
多語系卡片徽章、關閉按鈕或浮動控制需要跟閱讀方向調整時。
常見混淆：inline-end 不永遠等於 right；RTL 或垂直 writing mode 的物理方向會不同。
這段程式是理解起點，不是要你直接跳過 Starter。
inline-end 是一句文字讀到最後的那一側；LTR 在右，RTL 會自動變左。
正式說法：Logical inset properties map block/inline start/end offsets to physical sides according to writing-mode and direction。
.badge{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/style.css 定位：先讀 document/card 的 dir 與 writing-mode，再看 logical inset computed value。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先讀 document/card 的 dir 與 writing-mode，再看 logical inset computed value。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先讀 document/card 的 dir 與 writing-mode，再看 logical inset computed value。。
檔案：files/starter/style.css 定位：先讀 document/card 的 dir 與 writing-mode，再看 logical inset computed value。
要做：執行實驗切換 logical-corner class，讀取 inset-inline-end；完整 probe 再切 dir=ltr/rtl 量 offset。
預期：runtime inset-inline-end 由 0px 變16px；required facts 顯示 LTR 靠右、RTL 靠左。
證據：現有 runtime before=0px、after=16px；required facts 包含 ltrOffset、rtlOffset
卡住先查：先讀 document/card 的 dir 與 writing-mode，再看 logical inset computed value。
檔案：files/starter/style.css 定位：先讀 document/card 的 dir 與 writing-mode，再看 logical inset computed value。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime inset-inline-end 由 0px 變16px；required facts 顯示 LTR 靠右、RTL 靠左。
證據：現有 runtime before=0px、after=16px；required facts 包含 ltrOffset、rtlOffset
卡住先查：先讀 document/card 的 dir 與 writing-mode，再看 logical inset computed value。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
用閱讀方向思考 start/end，不先寫 left/right。
設定 inset-block-start 與 inset-inline-end。
完整解答與原因：inline-end 在 LTR 映射右側、RTL 映射左側；同一 CSS 不需語系專屬 override。