HTML DOM Style lineHeight Property - ตั้งค่าความสูงบรรทัด

คุณสมบัติ lineHeight ของ HTMLElement.style ใช้กำหนดหรืออ่านความสูงของบรรทัด (line height) คือระยะห่างระหว่างบรรทัดของข้อความ ในหน่วยต่างๆ

รูปแบบการใช้งาน (Syntax)

// อ่านค่า
const currentLineHeight = element.style.lineHeight;

// ตั้งค่า
element.style.lineHeight = "normal | number | length | % | initial | inherit";

ค่าที่ใช้ได้ (Values)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 2rem; }
    .text-box { 
      background: #f0f4f8; 
      border: 1px solid #d0d8e0; 
      border-radius: 8px; 
      padding: 1.5rem; 
      margin-bottom: 1rem;
      font-size: 16px;
      transition: line-height 0.3s ease;
    }
    button { 
      background: #317EFB; 
      color: white; 
      border: none; 
      padding: 0.75rem 1.5rem; 
      border-radius: 6px; 
      cursor: pointer; 
      margin-right: 0.5rem;
    }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h2>Demo: lineHeight Property</h2>
  
  <div id="demoText" class="text-box">
    นี่คือข้อความตัวอย่างเพื่อแสดงผลของ line-height property 
    เมื่อคุณกดปุ่มด้านล่าง ความสูงบรรทัดจะเปลี่ยนไป 
    ลองสังเกตระยะห่างระหว่างบรรทัดแต่ละบรรทัด
  </div>
  
  <button onclick="setLineHeight('normal')">Normal (default)</button>
  <button onclick="setLineHeight(1.5)">1.5 (แนะนำ)</button>
  <button onclick="setLineHeight(2)">2 (Double spaced)</button>
  <button onclick="setLineHeight('30px')">30px (Fixed)</button>
  <button onclick="setLineHeight('200%')">200%</button>
  
  <script>
    function setLineHeight(value) {
      const el = document.getElementById('demoText');
      el.style.lineHeight = value;
      console.log('lineHeight set to:', value);
    }
  </script>
</body>
</html>

แนวทางปฏิบัติที่ดีที่สุด (Best Practices)

• ใช้ unitless number (ตัวเลขไม่มีหน่วย) เช่น 1.5, 1.6 - เป็น แนะนำมากที่สุด เพราะสืบทอดได้อย่างถูกต้อง (child elements จะคำนวณจาก font-size ของตัวเอง)
• หลีกเลี่ยง length คงที่ (px, em) สำหรับ body text - เพราะอาจทำให้บรรทัดทับซ้อนเมื่อ font-size เปลี่ยน
• ค่าที่แนะนำ: 1.5 - 1.7 สำหรับ body text, 1.1 - 1.3 สำหรับ heading

ความแตกต่าง: number vs length vs %

<div style="font-size: 16px; line-height: 1.5"> 
  <!-- line-height = 24px (1.5 * 16) -->
  <span style="font-size: 32px"> 
    <!-- line-height = 48px (1.5 * 32) - สืบทอดตัวคูณ -->
  </span>
</div>

<div style="font-size: 16px; line-height: 24px"> 
  <span style="font-size: 32px"> 
    <!-- line-height = 24px (คงที่!) - บรรทัดจะทับซ้อน -->
  </span>
</div>

การเข้าถึง (Accessibility)

WCAG แนะนำ line-height ≥ 1.5 สำหรับ body text เพื่ออ่านง่ายสำหรับผู้มีปัญหาดู/อ่าน