การจัดรูปแบบข้อความด้วย CSS (Text Formatting)

CSS มีคุณสมบัติมากมายสำหรับจัดรูปแบบข้อความ ได้แก่ สีข้อความ, การประดับข้อความ, ความสูงบรรทัด, ทิศทางข้อความ, การจัดตำแหน่งข้อความ เป็นต้น

1. Text Alignment (การจัดตำแหน่งข้อความ)

ใช้ text-align จัดข้อความใน block container

text-align: left | right | center | justify | start | end | initial | inherit;

ตัวอย่าง: Justify กับ Multi-column

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo { 
      -webkit-columns: auto auto; 
      -moz-columns: auto auto; 
      columns: auto auto; 
      text-align: justify; 
    }
  </style>
</head>
<body>
  <h1>Machine Learning</h1>
  <div class="demo">Today's AI has far surpassed...</div>
</body>
</html>

2. Line Height (ความสูงบรรทัด)

ใช้ line-height ควบคุมระยะห่างระหว่างบรรทัด

line-height: normal | <number> | <length> | <percentage> | initial | inherit;

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style> div { line-height: 1.9; } </style>
</head>
<body>
  <h1>Demo Heading</h1>
  <div><p>This is demo text.<br> This is another demo text.</p></div>
</body>
</html>

แนวทาง: ใช้ unitless number (1.5, 1.6) เพื่อสืบทอดสัดส่วน ไม่ใช้ px/em/% เพื่อหลีกเลี่ยง inheritance issues

3. Text Decorations (การประดับข้อความ)

Shorthand text-decoration รวม:

text-decoration: <line> <style> <color> <thickness>;

• text-decoration-line: underline, overline, line-through
• text-decoration-style: solid, double, dotted, dashed, wavy
• text-decoration-color: สี
• text-decoration-thickness: ความหนา

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style> .demo { text-decoration: overline underline; } </style>
</head>
<body>
  <h1>Details</h1>
  <p class="demo">Examination Center near ABC College.</p>
  <p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

คุณสมบัติข้อความสำคัญอื่นๆ