ทิศทางบล็อกและอินไลน์

ทิศทางบล็อก คือทิศทางที่กล่องระดับบล็อกเรียงซ้อนกัน ในระบบการเขียนแนวนอน (LTR/RTL) ทิศทางบล็อกจะเป็นจากบนลงล่าง ในโหมดการเขียนแนวตั้ง ทิศทางนี้จะเปลี่ยนเป็นจากซ้ายไปขวาหรือจากขวาไปซ้าย

ทิศทางอินไลน์ คือทิศทางที่ข้อความไหลภายในบรรทัด ในภาษา LTR ทิศทางอินไลน์จะเป็นจากซ้ายไปขวา ส่วน RTL จะเป็นจากขวาไปซ้าย ในโหมดการเขียนแนวตั้ง ทิศทางนี้จะกลายเป็นจากบนลงล่าง

writing-mode กำหนดแนวพื้นฐานของการไหลของข้อความ:

• horizontal-tb — ข้อความแนวนอน จากบนลงล่าง (ค่าเริ่มต้น)
• vertical-rl — ข้อความแนวตั้ง โดยคอลัมน์เรียงจากขวาไปซ้าย
• vertical-lr — ข้อความแนวตั้ง โดยคอลัมน์เรียงจากซ้ายไปขวา

ใน writing-mode: horizontal-tb (ค่าเริ่มต้น):

• ทิศทางบล็อก = แนวตั้ง (บน → ล่าง)
• ทิศทางอินไลน์ = แนวนอน (ซ้าย → ขวาใน LTR และขวา → ซ้ายใน RTL)
• จุดเริ่มต้นบล็อก = ด้านบน และจุดสิ้นสุดบล็อก = ด้านล่าง
• จุดเริ่มต้นอินไลน์ = ด้านซ้าย (LTR) หรือด้านขวา (RTL)

ใน writing-mode: vertical-rl:

• ทิศทางบล็อก = แนวนอน (ขวา → ซ้าย)
• ทิศทางอินไลน์ = แนวตั้ง (บน → ล่าง)
• จุดเริ่มต้นบล็อก = ด้านขวา และจุดสิ้นสุดบล็อก = ด้านซ้าย
• จุดเริ่มต้นอินไลน์ = ด้านบน และจุดสิ้นสุดอินไลน์ = ด้านล่าง

ลองนึกภาพว่าเป็นระบบพิกัดที่หมุนไปตามโหมดการเขียน คุณสมบัติเชิงตรรกะจะอธิบายตำแหน่งที่อ้างอิงจากระบบที่หมุนได้นี้ ไม่ใช่จากหน้าจอที่มีตำแหน่งตายตัว

ในโหมดการเขียนแนวตั้ง text-orientation จะควบคุมทิศทางของอักขระแต่ละตัว:

• mixed: หมุนอักขระละติน และคงอักขระ CJK ให้ตั้งตรง
• upright: อักขระทั้งหมดตั้งตรง (สำหรับ CJK แนวตั้ง)
• sideways: หมุนอักขระทั้งหมดไปด้านข้าง

การใช้งานจริงอย่างหนึ่งคือป้ายกำกับแถบด้านข้างหรือป้ายกำกับแกนแผนภูมิที่หมุนในบริบทการเขียนแนวนอน:

คอนเทนเนอร์หนึ่งรายการสามารถมีโหมดการเขียนแบบหนึ่ง ขณะที่องค์ประกอบอินไลน์แต่ละรายการมีอีกแบบหนึ่งได้ วิธีนี้ใช้สำหรับผสมข้อความละตินและ CJK ในย่อหน้าเดียวกัน

สิ่งที่เทียบเท่าเชิงตรรกะของความกว้างและความสูง:

• inline-size = ความกว้างใน horizontal-tb (มิติอินไลน์)
• block-size = ความสูงใน horizontal-tb (มิติบล็อก)

สำหรับข้อความแนวตั้งที่มีตัวเลขหรือตัวย่อ text-combine-upright (tcy) จะทำให้ลำดับอักขระสั้น ๆ ตั้งตรงและถูกบีบให้อยู่ภายในช่องข้อความแนวตั้งเดียว

ใน writing-mode: horizontal-tb ที่ใช้ภาษา LTR แกนใดคือแกน "บล็อก"?

แกนบล็อกคือทิศทางการเรียงซ้อนของกล่องบล็อก ส่วนแกนอินไลน์คือทิศทางการไหลของข้อความ ในระบบการเขียนแนวนอน บล็อก = แนวตั้ง และอินไลน์ = แนวนอน ในการเขียนแนวตั้ง แกนทั้งสองจะสลับกัน writing-mode ควบคุมแนวพื้นฐานของแกน คุณสมบัติเชิงตรรกะจะปรับตามว่าแกนใดเป็นบล็อกและแกนใดเป็นอินไลน์ในขณะนั้น