โค้ด CSS 100 ไบต์ที่ช่วยให้อ่านบทความได้สบายขึ้น

 (swyx.io)
11 คะแนน โดย xguru 2021-10-29 | 2 ความคิดเห็น | แชร์ทาง WhatsApp
  • ใส่ไว้ในส่วนขยาย user stylesheet เพื่อให้ดูเว็บไซต์ได้สบายตายิ่งขึ้น

html {

max-width: 70ch; /* กำหนดความกว้างซ้ายขวาไว้ที่ 70 ตัวอักษร */

padding: 3em 1em; /* ระยะห่างบนล่าง */

margin: auto; /* จัดให้อยู่กึ่งกลาง */

line-height: 1.75; /* ความสูงบรรทัดที่อ่านสบาย ตัดหน่วยออกโดยตั้งใจเพื่อให้ปรับตามขนาดฟอนต์ */

font-size: 1.25em; /* ปรับค่านี้เป็นขนาดที่ต้องการได้ ใช้ em เพื่อให้สเกลได้ */

}

  • เพิ่มอีก 100 ไบต์

h1,h2,h3,h4,h5,h6 {

margin: 3em 0 1em;

}

p,ul,ol {

margin-bottom: 2em;

color: #1d1d1d;

font-family: sans-serif;

}

บทความที่เกี่ยวข้อง

2 ความคิดเห็น

 
lunamoth 2021-10-29

ถ้าเป็นหน้าเว็บที่อ่านบ่อย

font-family: Lato,NanumBarunGothic;

font-size: 17px;

line-height: 200%;

word-break: keep-all;

ผมใส่แบบนี้แล้วค่อยอ่านอยู่

อันนี้ก็น่าจะต้องลองใส่ดูเหมือนกัน ขอบคุณครับ
 
xguru 2021-10-29

ส่วนขยายเบราว์เซอร์ Stylebot https://github.com/ankit/stylebot

มีแบบที่ทำคล้ายกันด้วย bookmarklet