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

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

ในบทเรียนที่แล้ว เราได้เรียนรู้เกี่ยวกับการปรับแต่ง Font ซึ่งเป็นส่วนสำคัญในการกำหนดลักษณะของตัวอักษรในเว็บไซต์ ในบทนี้ เราจะมาเรียนรู้เรื่องการจัดตำแหน่งข้อความ (Text Alignment) ซึ่งจะช่วยให้ข้อความของเราดูเป็นระเบียบ อ่านง่าย และสวยงามมากยิ่งขึ้น

การจัดตำแหน่งข้อความด้วย text-align

คุณสมบัติ text-align เป็นคุณสมบัติหลักที่ใช้ในการจัดตำแหน่งข้อความภายใน Element ซึ่งมีค่าให้เลือกใช้งานดังนี้:

• left: จัดข้อความชิดซ้าย (ค่าเริ่มต้น)
• center: จัดข้อความกึ่งกลาง
• right: จัดข้อความชิดขวา
• justify: จัดข้อความให้เต็มความกว้างของ Element โดยกระจายช่องว่างระหว่างคำ (เหมาะสำหรับย่อหน้า)

ตัวอย่าง:

<div style="width: 300px; border: 1px solid black;">
  <p style="text-align: left;">ข้อความชิดซ้าย</p>
  <p style="text-align: center;">ข้อความกึ่งกลาง</p>
  <p style="text-align: right;">ข้อความชิดขวา</p>
  <p style="text-align: justify;">
    ข้อความจัดเต็มความกว้าง ข้อความจัดเต็มความกว้าง ข้อความจัดเต็มความกว้าง
    ข้อความจัดเต็มความกว้าง ข้อความจัดเต็มความกว้าง ข้อความจัดเต็มความกว้าง
  </p>
</div>

ผลลัพธ์:

จากตัวอย่าง เราได้สร้าง div ที่มีขนาด 300px และมีเส้นขอบ จากนั้นเราได้ใส่ p (paragraph) tag เข้าไป 4 อัน โดยแต่ละอันมี text-align ที่แตกต่างกัน ทำให้ข้อความในแต่ละ p ถูกจัดตำแหน่งแตกต่างกันไป

กรณีใช้งานจริง:

• หัวข้อ (Heading): มักจะใช้ text-align: center; เพื่อให้หัวข้ออยู่ตรงกลางหน้า
• เมนู (Menu): อาจใช้ text-align: right; เพื่อให้เมนูอยู่ชิดขวา
• ย่อหน้า (Paragraph): มักจะใช้ text-align: justify; เพื่อให้ย่อหน้าดูเรียบร้อย

การกำหนดความสูงของบรรทัดด้วย line-height

คุณสมบัติ line-height ใช้สำหรับกำหนดความสูงของบรรทัด ซึ่งมีผลต่อระยะห่างระหว่างบรรทัดของข้อความ ทำให้ข้อความอ่านง่ายขึ้น

ตัวอย่าง:

<p style="line-height: 1.5;">
  ข้อความที่มีความสูงบรรทัด 1.5 เท่าของขนาดตัวอักษร ข้อความที่มีความสูงบรรทัด 1.5 เท่าของขนาดตัวอักษร
  ข้อความที่มีความสูงบรรทัด 1.5 เท่าของขนาดตัวอักษร ข้อความที่มีความสูงบรรทัด 1.5 เท่าของขนาดตัวอักษร
</p>

<p style="line-height: 2;">
  ข้อความที่มีความสูงบรรทัด 2 เท่าของขนาดตัวอักษร ข้อความที่มีความสูงบรรทัด 2 เท่าของขนาดตัวอักษร
  ข้อความที่มีความสูงบรรทัด 2 เท่าของขนาดตัวอักษร ข้อความที่มีความสูงบรรทัด 2 เท่าของขนาดตัวอักษร
</p>

ผลลัพธ์:

ข้อความที่มีความสูงบรรทัด 1.5 เท่าของขนาดตัวอักษร ข้อความที่มีความสูงบรรทัด 1.5 เท่าของขนาดตัวอักษร ข้อความที่มีความสูงบรรทัด 1.5 เท่าของขนาดตัวอักษร ข้อความที่มีความสูงบรรทัด 1.5 เท่าของขนาดตัวอักษร

ข้อความที่มีความสูงบรรทัด 2 เท่าของขนาดตัวอักษร ข้อความที่มีความสูงบรรทัด 2 เท่าของขนาดตัวอักษร ข้อความที่มีความสูงบรรทัด 2 เท่าของขนาดตัวอักษร ข้อความที่มีความสูงบรรทัด 2 เท่าของขนาดตัวอักษร

จากตัวอย่าง เราได้กำหนด line-height เป็น 1.5 และ 2 ซึ่งจะทำให้ระยะห่างระหว่างบรรทัดเพิ่มขึ้นตามค่าที่กำหนด ทำให้ข้อความอ่านง่ายขึ้น

ค่าที่นิยมใช้:

• 1: ความสูงบรรทัดเท่ากับขนาดตัวอักษร
• 1.5: ความสูงบรรทัด 1.5 เท่าของขนาดตัวอักษร (ค่าที่แนะนำ)
• 2: ความสูงบรรทัด 2 เท่าของขนาดตัวอักษร
• หรือกำหนดเป็นหน่วย px, em, rem ได้เช่นกัน

การกำหนดระยะห่างระหว่างตัวอักษรด้วย letter-spacing

คุณสมบัติ letter-spacing ใช้สำหรับกำหนดระยะห่างระหว่างตัวอักษรแต่ละตัว ทำให้ข้อความดูโปร่ง หรือดูแน่นขึ้นได้

ตัวอย่าง:

<p style="letter-spacing: 2px;">ข้อความที่มีระยะห่างระหว่างตัวอักษร 2px</p>
<p style="letter-spacing: -1px;">ข้อความที่มีระยะห่างระหว่างตัวอักษร -1px</p>

ผลลัพธ์:

ข้อความที่มีระยะห่างระหว่างตัวอักษร 2px

ข้อความที่มีระยะห่างระหว่างตัวอักษร -1px

จากตัวอย่าง เราได้กำหนด letter-spacing เป็น 2px ซึ่งจะทำให้ระยะห่างระหว่างตัวอักษรเพิ่มขึ้น และ -1px ซึ่งจะทำให้ระยะห่างระหว่างตัวอักษรลดลง

ข้อควรระวัง: การใช้ letter-spacing มากเกินไป อาจทำให้ข้อความอ่านยาก ดังนั้นควรใช้ในปริมาณที่พอเหมาะ

ข้อผิดพลาดที่พบบ่อย

• การลืมใส่หน่วย: เมื่อกำหนดค่า line-height หรือ letter-spacing อย่าลืมใส่หน่วย เช่น px, em, rem หรือใช้ตัวเลขเฉยๆ (สำหรับ line-height ที่เป็นสัดส่วน)
• การใช้ text-align: justify; กับข้อความสั้นๆ: หากใช้ text-align: justify; กับข้อความสั้นๆ อาจทำให้เกิดช่องว่างขนาดใหญ่ระหว่างคำ
• การใช้ letter-spacing มากเกินไป: การใช้ letter-spacing มากเกินไป อาจทำให้ข้อความอ่านยาก

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับการจัดตำแหน่งข้อความด้วย CSS ซึ่งประกอบด้วย:

• text-align: สำหรับจัดตำแหน่งข้อความชิดซ้าย, กึ่งกลาง, ชิดขวา, หรือเต็มความกว้าง
• line-height: สำหรับกำหนดความสูงของบรรทัด
• letter-spacing: สำหรับกำหนดระยะห่างระหว่างตัวอักษร

ความรู้เหล่านี้จะช่วยให้คุณสามารถจัดรูปแบบข้อความในเว็บไซต์ได้อย่างสวยงามและเหมาะสมกับการใช้งาน ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับ CSS Display Property ซึ่งเป็นอีกหนึ่งคุณสมบัติที่สำคัญในการจัด Layout ของเว็บไซต์