17 สิงหาคม 2568ไทย

คู่มือฉบับสมบูรณ์เกี่ยวกับ CSS writing-mode สำรวจวิธีควบคุมทิศทางข้อความสำหรับการทำให้เป็นสากล (i18n) และสร้างเว็บไซต์ที่น่าดึงดูดและเข้าถึงได้ทั่วโลก

CSS Writing Mode: การควบคุมทิศทางข้อความสากลสำหรับเว็บไซต์ทั่วโลก

ในโลกที่เชื่อมต่อถึงกันในปัจจุบัน เว็บไซต์ต้องตอบสนองผู้ชมที่หลากหลาย และแง่มุมที่สำคัญอย่างหนึ่งคือการจัดการทิศทางของข้อความที่แตกต่างกัน CSS writing-mode เป็นเครื่องมืออันทรงพลังที่ช่วยให้นักพัฒนาสามารถควบคุมทิศทางที่ข้อความไหล ทำให้พวกเขาสามารถสร้างประสบการณ์บนเว็บที่เป็นสากล (i18n) และดึงดูดสายตาได้อย่างแท้จริง คู่มือฉบับสมบูรณ์นี้จะสำรวจความซับซ้อนของ writing-mode พร้อมทั้งตัวอย่างที่นำไปใช้ได้จริงและข้อมูลเชิงลึกที่นำไปปฏิบัติได้ เพื่อช่วยให้คุณเชี่ยวชาญด้านทิศทางข้อความสำหรับเว็บไซต์ทั่วโลก

ทำความเข้าใจโหมดการเขียน (Writing Modes)

คุณสมบัติ writing-mode ของ CSS ระบุว่าบรรทัดของข้อความจะถูกจัดวางในแนวนอนหรือแนวตั้ง และทิศทางที่บล็อกต่างๆ ดำเนินไป มีบทบาทสำคัญในการปรับหน้าเว็บสำหรับภาษาที่ใช้ทิศทางการเขียนที่แตกต่างกัน เช่น:

จากซ้ายไปขวา (LTR): ภาษาอังกฤษ สเปน ฝรั่งเศส เยอรมัน และภาษาตะวันตกอื่นๆ อีกมากมาย
จากขวาไปซ้าย (RTL): ภาษาอาหรับ ฮิบรู เปอร์เซีย และอูรดู
แนวตั้ง: ภาษาจีนดั้งเดิม ญี่ปุ่น และมองโกเลีย

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

ค่าต่างๆ ของคุณสมบัติ `writing-mode`

คุณสมบัติ writing-mode ยอมรับค่าต่างๆ หลายค่า โดยแต่ละค่าจะระบุทิศทางข้อความและการไหลของบล็อกที่แตกต่างกัน:

horizontal-tb: แนวนอนจากบนลงล่าง บรรทัดของข้อความเป็นแนวนอนและไหลจากบนลงล่าง นี่คือค่าเริ่มต้น
vertical-rl: แนวตั้งจากขวาไปซ้าย บรรทัดของข้อความเป็นแนวตั้งและไหลจากขวาไปซ้าย บล็อกจะดำเนินไปในทิศทางลง
vertical-lr: แนวตั้งจากซ้ายไปขวา บรรทัดของข้อความเป็นแนวตั้งและไหลจากซ้ายไปขวา บล็อกจะดำเนินไปในทิศทางลง
sideways-rl: ชื่อแฝงที่เลิกใช้แล้วสำหรับ vertical-rl
sideways-lr: ชื่อแฝงที่เลิกใช้แล้วสำหรับ vertical-lr

ค่าต่อไปนี้ก็มีให้ใช้งานเช่นกันแต่มักไม่ค่อยได้ใช้:

block-flow: ใช้ทิศทางของบริบทการจัดรูปแบบบล็อก ซึ่งอาจได้รับอิทธิพลจากคุณสมบัติอื่นๆ

ตัวอย่างเบื้องต้น

ลองมาดูการใช้ writing-mode ด้วยตัวอย่างง่ายๆ กัน:

ข้อความแนวนอน (ค่าเริ่มต้น)

นี่คือพฤติกรรมเริ่มต้น จึงไม่จำเป็นต้องระบุ writing-mode อย่างชัดเจน:


<p>นี่คือข้อความแนวนอน</p>

ข้อความแนวตั้ง (จากขวาไปซ้าย)

หากต้องการแสดงข้อความในแนวตั้งจากขวาไปซ้าย ให้ใช้ vertical-rl:


<p style="writing-mode: vertical-rl;">นี่คือข้อความแนวตั้ง (จากขวาไปซ้าย)</p>

ข้อความแนวตั้ง (จากซ้ายไปขวา)

หากต้องการแสดงข้อความในแนวตั้งจากซ้ายไปขวา ให้ใช้ vertical-lr:


<p style="writing-mode: vertical-lr;">นี่คือข้อความแนวตั้ง (จากซ้ายไปขวา)</p>

การประยุกต์ใช้ `writing-mode` ในทางปฏิบัติ

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

1. การปรับให้เข้ากับภาษากลุ่ม RTL

สำหรับเว็บไซต์ที่รองรับภาษากลุ่ม RTL เช่น ภาษาอาหรับหรือฮิบรู writing-mode เป็นสิ่งจำเป็นสำหรับการแสดงข้อความที่ถูกต้อง คุณสามารถใช้ CSS selectors เพื่อใช้ writing-mode: rtl; กับองค์ประกอบที่ต้องการหรือทั้งเอกสาร โดยอิงตาม attribute ของภาษา:


<html lang="ar">
  <body>
    <p>هذا نص عربي.</p>
  </body>
</html>


html[lang="ar"] {
  direction: rtl;
  unicode-bidi: bidi-override;
}

แม้ว่า direction: rtl; จะมีความสำคัญอย่างยิ่งในการตั้งค่าทิศทางพื้นฐาน คุณอาจต้องใช้ unicode-bidi: bidi-override; เพื่อให้แน่ใจว่าการจัดการข้อความที่มีทิศทางผสมกันนั้นถูกต้อง แนวทางสมัยใหม่มักจะนิยมใช้คุณสมบัติเชิงตรรกะ (logical properties) ซึ่งจะกล่าวถึงในภายหลัง

2. การสร้างเมนูนำทางแนวตั้ง

สามารถใช้ writing-mode เพื่อสร้างเมนูนำทางแนวตั้ง ซึ่งมักพบเห็นได้ในเว็บไซต์ภาษาญี่ปุ่นและจีน สิ่งนี้สามารถเพิ่มลูกเล่นทางภาพที่ไม่เหมือนใครให้กับเว็บไซต์ของคุณได้:


<ul class="vertical-menu">
  <li><a href="#">หน้าแรก</a></li>
  <li><a href="#">เกี่ยวกับ</a></li>
  <li><a href="#">บริการ</a></li>
  <li><a href="#">ติดต่อ</a></li>
</ul>


.vertical-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vertical-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

ในตัวอย่างนี้ text-orientation: upright; ถูกใช้เพื่อให้แน่ใจว่าข้อความภายในรายการเมนูแนวตั้งจะแสดงในแนวตั้งตรงแทนที่จะหมุนไป

3. การออกแบบเลย์เอาต์สไตล์นิตยสาร

สามารถนำ writing-mode มาใช้เพื่อให้ได้เลย์เอาต์สไตล์นิตยสาร ตัวอย่างเช่น คุณอาจมีรูปภาพขนาดใหญ่ที่มีข้อความแนวตั้งวางซ้อนทับเพื่อสร้างเอฟเฟกต์ทางภาพที่โดดเด่น


<div class="magazine-section">
  <img src="image.jpg" alt="Magazine Image">
  <div class="vertical-text">สัมภาษณ์พิเศษ</div>
</div>


.magazine-section {
  position: relative;
  width: 500px;
  height: 300px;
}

.magazine-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vertical-text {
  position: absolute;
  top: 0;
  right: 10px;
  color: white;
  font-size: 2em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform-origin: top right;
  transform: rotate(180deg); /* จำเป็นเพื่อให้แสดงผลได้อย่างถูกต้องในเบราว์เซอร์ต่างๆ */
}

บ่อยครั้งที่จำเป็นต้องใช้ transform: rotate(180deg); เพื่อให้แน่ใจว่าการแสดงผลจะสอดคล้องกันในเบราว์เซอร์ต่างๆ โดยเฉพาะเวอร์ชันเก่า

4. การปรับปรุงการแสดงผลข้อมูล (Data Visualization)

ในการแสดงผลข้อมูล writing-mode อาจมีประโยชน์สำหรับการติดป้ายกำกับแกนในแผนภูมิและกราฟ โดยเฉพาะเมื่อมีพื้นที่จำกัด ตัวอย่างเช่น คุณอาจหมุนป้ายกำกับบนแกนแนวตั้งเพื่อป้องกันไม่ให้ทับซ้อนกัน

เทคนิคขั้นสูงและข้อควรพิจารณา

เพื่อใช้ประโยชน์จากพลังของ writing-mode ได้อย่างเต็มที่ โปรดพิจารณาเทคนิคขั้นสูงและปัจจัยสำคัญเหล่านี้:

1. คุณสมบัติและค่าเชิงตรรกะ (Logical Properties and Values)

CSS สมัยใหม่ได้แนะนำคุณสมบัติและค่าเชิงตรรกะ ซึ่งเป็นวิธีที่ยืดหยุ่นและมีความหมายมากขึ้นในการจัดการเลย์เอาต์และทิศทาง แทนที่จะใช้คุณสมบัติทางกายภาพ เช่น left และ right จะใช้คุณสมบัติเชิงตรรกะ เช่น start และ end ซึ่งจะปรับตามทิศทางการเขียน ตัวอย่างเช่น:

margin-inline-start: เทียบเท่ากับ margin-left ใน LTR และ margin-right ใน RTL
padding-block-start: เทียบเท่ากับ padding-top ในโหมดการเขียนแนวนอน และ padding-left หรือ padding-right ในโหมดการเขียนแนวตั้ง

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

2. การใช้ `writing-mode` ร่วมกับคุณสมบัติ CSS อื่นๆ

writing-mode ทำงานร่วมกับคุณสมบัติ CSS อื่นๆ เช่น text-orientation, direction และ unicode-bidi เพื่อควบคุมลักษณะที่ปรากฏและพฤติกรรมของข้อความ การทำความเข้าใจการทำงานร่วมกันเหล่านี้เป็นสิ่งสำคัญเพื่อให้ได้ผลลัพธ์ที่ต้องการ

text-orientation: ระบุการวางแนวของอักขระในโหมดการเขียนแนวตั้ง ค่าต่างๆ ได้แก่ upright, sideways, mixed และ use-glyph-orientation
direction: ระบุทิศทางพื้นฐานของข้อความ (LTR หรือ RTL)
unicode-bidi: ควบคุมวิธีการใช้อัลกอริทึมสองทิศทางของ Unicode กับองค์ประกอบ

3. การจัดการข้อความที่มีทิศทางผสมกัน

เมื่อต้องจัดการกับข้อความที่มีทั้งอักขระ LTR และ RTL (เช่น ข้อความภาษาอังกฤษภายในย่อหน้าภาษาอาหรับ) สิ่งสำคัญคือต้องใช้คุณสมบัติ unicode-bidi เพื่อให้แน่ใจว่าการแสดงผลถูกต้อง ค่า bidi-override มักใช้เพื่อบังคับทิศทางที่ต้องการ


<p dir="rtl">هذا نص عربي يتضمن بعض الكلمات الإنجليزية <span style="unicode-bidi: bidi-override; direction: ltr;">like this example.</span></p>

4. ข้อควรพิจารณาเกี่ยวกับฟอนต์

ไม่ใช่ทุกฟอนต์จะเหมาะสำหรับการเขียนในแนวตั้ง ฟอนต์บางตัวอาจไม่มีสัญลักษณ์ (glyphs) สำหรับการเขียนในแนวตั้งหรืออาจแสดงผลไม่ถูกต้อง เมื่อใช้โหมดการเขียนแนวตั้ง ควรเลือกฟอนต์ที่ออกแบบมาโดยเฉพาะสำหรับข้อความแนวตั้งหรือฟอนต์ที่รองรับสัญลักษณ์แนวตั้งได้ดี

ฟอนต์จากประเทศในเอเชียตะวันออก (จีน ญี่ปุ่น เกาหลี) โดยทั่วไปมีการรองรับการเขียนในแนวตั้งที่ดีมาก

5. การเข้าถึงได้ (Accessibility)

ตรวจสอบให้แน่ใจว่าการใช้ writing-mode ของคุณไม่ส่งผลเสียต่อการเข้าถึงได้ จัดหาข้อความทางเลือกสำหรับรูปภาพและเนื้อหาที่ไม่ใช่ข้อความอื่นๆ และตรวจสอบให้แน่ใจว่าข้อความสามารถอ่านและเข้าใจได้สำหรับผู้ใช้ที่มีความพิการ ใช้องค์ประกอบ HTML เชิงความหมายและ attribute ของ ARIA เพื่อปรับปรุงการเข้าถึงได้

6. ความเข้ากันได้ของเบราว์เซอร์

writing-mode ได้รับการสนับสนุนอย่างดีในเบราว์เซอร์สมัยใหม่ แต่เบราว์เซอร์รุ่นเก่าอาจต้องใช้คำนำหน้าของผู้ให้บริการ (vendor prefixes) (เช่น -webkit-writing-mode, -ms-writing-mode) ใช้ CSS preprocessor เช่น Sass หรือ Less เพื่อเพิ่มคำนำหน้าของผู้ให้บริการโดยอัตโนมัติ หรือใช้เครื่องมืออย่าง Autoprefixer

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ `writing-mode`

เพื่อใช้ writing-mode อย่างมีประสิทธิภาพและสร้างเว็บไซต์ที่เข้าถึงได้ทั่วโลก ให้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:

ใช้คุณสมบัติและค่าเชิงตรรกะทุกครั้งที่ทำได้ ซึ่งจะทำให้ CSS ของคุณปรับเปลี่ยนได้และบำรุงรักษาง่ายขึ้น
เลือกฟอนต์ที่เหมาะสมสำหรับโหมดการเขียนแนวตั้ง ทดสอบฟอนต์ของคุณเพื่อให้แน่ใจว่าแสดงผลได้อย่างถูกต้องในข้อความแนวตั้ง
พิจารณาเรื่องการเข้าถึงได้ ตรวจสอบให้แน่ใจว่าการใช้ writing-mode ของคุณไม่ส่งผลเสียต่อการเข้าถึงได้สำหรับผู้ใช้ที่มีความพิการ
ทดสอบเลย์เอาต์ของคุณในเบราว์เซอร์และอุปกรณ์ต่างๆ ตรวจสอบให้แน่ใจว่าเลย์เอาต์ของคุณแสดงผลได้อย่างถูกต้องบนแพลตฟอร์มต่างๆ
ใช้ CSS preprocessors หรือ Autoprefixer เพื่อจัดการกับคำนำหน้าของผู้ให้บริการ ซึ่งจะช่วยประหยัดเวลาและความพยายาม และทำให้แน่ใจว่า CSS ของคุณเข้ากันได้กับเบราว์เซอร์รุ่นเก่า
แยกเนื้อหาออกจากการนำเสนอ ใช้ CSS เพื่อควบคุมการนำเสนอเนื้อหาของคุณ และหลีกเลี่ยงการใช้ HTML เพื่อวัตถุประสงค์ในการจัดรูปแบบ

ตัวอย่างเว็บไซต์ทั่วโลกที่ใช้ `writing-mode`

เว็บไซต์หลายแห่งทั่วโลกใช้ writing-mode เพื่อวัตถุประสงค์ที่หลากหลาย ตั้งแต่การปรับให้เข้ากับภาษากลุ่ม RTL ไปจนถึงการสร้างเลย์เอาต์ที่มีเอกลักษณ์ทางสายตา นี่คือตัวอย่างบางส่วน:

เว็บไซต์ข่าวในภาษาอาหรับหรือฮิบรู: เว็บไซต์เหล่านี้ใช้ direction: rtl และอาจมีการปรับ writing-mode เพื่อการแสดงข้อความที่ถูกต้อง
เว็บไซต์ศิลปะและวัฒนธรรมของญี่ปุ่นและจีน: มักจะนำการเขียนในแนวตั้งมาใช้สำหรับหัวเรื่อง เมนู และองค์ประกอบตกแต่ง
นิตยสารแฟชั่น: มักใช้ข้อความแนวตั้งในเลย์เอาต์ภาพเพื่อสร้างเอฟเฟกต์เชิงสไตล์

สรุป

CSS writing-mode เป็นเครื่องมืออันทรงพลังสำหรับการสร้างเว็บไซต์ที่เป็นสากลและดึงดูดสายตา ด้วยการทำความเข้าใจค่าต่างๆ ของคุณสมบัติและวิธีการทำงานร่วมกับคุณสมบัติ CSS อื่นๆ คุณสามารถสร้างเลย์เอาต์ที่ปรับให้เข้ากับทิศทางข้อความที่แตกต่างกันและปรับปรุงประสบการณ์ผู้ใช้สำหรับผู้ชมทั่วโลก อย่าลืมพิจารณาเรื่องการเข้าถึงได้ ความเข้ากันได้ของเบราว์เซอร์ และการเลือกฟอนต์ เพื่อให้แน่ใจว่าเว็บไซต์ของคุณสามารถเข้าถึงได้และดึงดูดสายตาสำหรับผู้ใช้ทุกคน

ในขณะที่การพัฒนาเว็บยังคงมีการพัฒนาอย่างต่อเนื่อง การเรียนรู้เทคนิคต่างๆ เช่น writing-mode จึงมีความสำคัญมากขึ้นเรื่อยๆ สำหรับการสร้างประสบการณ์ออนไลน์ที่เป็นสากลและครอบคลุมอย่างแท้จริง เปิดรับพลังของการทำให้เป็นสากลและสร้างเว็บไซต์ที่โดนใจผู้ใช้จากทั่วทุกมุมโลก