GORAGOD.com

ปกติแล้วเวลาที่เราสั่งพิมพ์เอกสาร อุปสรรคหนึ่งในการออกแบบเอกสารคือการแสดงผลที่มีหลายบบรทัด ที่ไม่สามารถแสดงเส้นประหลายบรรทัดได้ เนื่องจากการใช้คำสั่ง border จะแสดงผลแค่เพียงบรรทัดเดียวเท่านั้น ซึ่งเป็นอุปสรรคต่อการแสดงผลในลักษณะนี้มาตลอด

เอาจริงๆ การแก้ปัญหานี้ผมเจอโดยบังเอิญนะครับ จากการค้นหาการสร้างกราฟด้วย CSS เลยลองเอามาประยุกต์ใช้ดูพบว่ามันใช้ได้ดีทีเดียว

หลักการคือการวาดพื้นหลังด้วย linear-gradient สลับกันไปมา (คล้ายๆกับการวาดตารางหมากรุก) ตามโค้ดด้านล่าง

<style>
body {
  /* ความสูงของตัวอักษร เท่ากับความสูงของเส้นประ */
  line-height: 2em;
  /* สีพื้นหลัง สีเดียวกันกับการวาด grid */
  background-color: #fff;
  /* ขนาดของ grid 2em เท่ากับความสูงของตัวอีกษร */
  background-size: 4px 4px, 4px 2em;
  /* วาด grid */
  background-image:
    linear-gradient(to bottom, transparent 5px, #fff 5px),
    linear-gradient(to right, #fff 1px, transparent 1px),
    linear-gradient(to right, transparent 2px, #fff 2px),
    linear-gradient(to bottom, #444 1px, transparent 1px);
  /* ลบเส้นประที่ขอบ */
  box-shadow: 0 0 0 1px inset #fff;
  /* ใช้ padding แทน margin ในกรณีที่ต้องการให้ข้อความห่างจากขอบ */
  padding: 10px;
  margin: 0;
}
</style>
ทดสอบการใช้งานภาษาไทย<br>
ให้ถูกต้อง<br>
สมบูรณ์แบบ<br>
Hello<br>
World!

ผลลัพท์

หมายเหตุ เนื่องจาก CSS จะทำการวาดเส้นประในแบบพื้นหลัง ดังนั้นหากต้องการพิมพ์เอกสารที่ใช้ CSS นี้ จะต้องใช้ตัวเลือก พิมพ์รูปภาพในพื้นหลัง ของการตั้งค่าการพิมพ์ด้วย