readable.css

 (readable-css.freedomtowrite.org)
2 คะแนน โดย GN⁺ 8 시간 전 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • readable.css เป็นเฟรมเวิร์ก CSS ที่ไม่ได้มุ่งเป็นระบบดีไซน์ทั้งเว็บไซต์ แต่เพิ่มสไตล์พื้นฐานที่สมเหตุสมผลและดูดีให้กับ Semantic HTML
  • หลักการสำคัญคือ ความสม่ำเสมอ โดยสี รูปแบบตัวอักษร ความหนาของเส้นขอบ และความสูงบรรทัดจะถูกใช้ให้สอดคล้องกันทั่วทั้งเว็บไซต์
  • รองรับ โหมดสว่าง/มืด, การออกแบบแบบตอบสนอง, จังหวะแนวตั้ง, และมีสไตล์สำหรับ header, footer, navigation, table, button, form
  • ไม่รวมแอนิเมชันหวือหวา, ฟอนต์แบบกำหนดเอง, utility class, หรือองค์ประกอบที่เขียนทับการตั้งค่าเบราว์เซอร์ของผู้ใช้
  • อาศัย Semantic HTML เพื่อทำความเข้าใจเจตนาของโครงสร้าง และรองรับ Firefox 84+, Chromium 88+, Edge 88+, Safari 10+ โดยไม่รองรับ IE

ฟีเจอร์หลักและขอบเขตการออกแบบ

  • readable.css ไม่ใช่เฟรมเวิร์กสำหรับสร้างระบบดีไซน์ทั้งเว็บไซต์ แต่เป็นเฟรมเวิร์ก CSS ที่ทำให้ HTML พื้นฐานดูสมเหตุสมผลและสวยงาม
  • รองรับ โหมดสว่าง/มืด แบบกำหนดเองหรือผ่าน prefers-color-scheme พร้อมทั้งรองรับการออกแบบแบบตอบสนองและจังหวะแนวตั้ง
  • มีสไตล์สำหรับ header, footer, navigation bar, image, blockquote, aside, table, button และ form
  • การจัดข้อความชิดขอบทั้งสองด้านถูกปิดไว้เป็นค่าเริ่มต้น และรองรับ ฟอนต์เนทีฟ เช่น serif, sans-serif, monospace
  • ตั้งใจไม่รวมแอนิเมชันหวือหวา, ฟอนต์แบบกำหนดเอง, utility class, และองค์ประกอบที่เขียนทับการตั้งค่าเบราว์เซอร์ของผู้ใช้

วิธีใช้งานและขอบเขตการรองรับ

  • สามารถดาวน์โหลดไฟล์ CSS เวอร์ชันล่าสุดได้จากหน้าริลีส แล้วเพิ่มเข้าไปในเว็บไซต์ 
    <link rel="stylesheet" type="text/css" href="/path/to/readable.css">
  • readable.css ตีความเจตนาของเว็บไซต์ตามวิธีการใช้ Semantic HTML ดังนั้นหากต้องการใช้สไตล์ชีตนี้อย่างเหมาะสม ควรเขียน Semantic HTML ให้ถูกต้อง
  • ดูคู่มือการใช้งานและแนวทางเขียน HTML ให้เหมาะกับ readable.css ได้ที่วิกิ
  • รองรับ Firefox 84+, Chromium 88+, Edge 88+, Safari 10+ และ ไม่รองรับ IE
  • ข้อจำกัดฝั่ง Chromium, Firefox และ Edge คือการรองรับ :not() และ :is() ส่วนข้อจำกัดของ Safari คือการรองรับ ตัวแปร CSS
  • ซอร์สโค้ดอยู่ที่Codeberg และเอกสารอยู่ที่Docs
  • readable.css และโค้ดของเว็บไซต์ใช้ไลเซนส์ 0BSD ซึ่งสามารถนำไปใช้เพื่อวัตถุประสงค์ใดก็ได้โดยไม่ต้องระบุแหล่งที่มาแบบบังคับ
  • Freedom to Write เป็นขบวนการที่สร้างและสนับสนุนโซลูชันซอฟต์แวร์เสรีและโอเพนซอร์สสำหรับอุตสาหกรรมการเขียน

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

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

 
GN⁺ 8 시간 전
ความเห็นจาก Lobste.rs

  • ชอบที่ไม่ได้ไปยุ่งกับ font-size เริ่มต้น ผู้ใช้สามารถตั้งค่าขนาดที่ต้องการไว้ใน user agent อย่างเบราว์เซอร์ได้ และก็ควรทำแบบนั้น ส่วนเว็บไซต์ก็ควร เคารพการตั้งค่านั้น
    การล็อกไว้ที่ 12px มันเล็กเกินไปจนน่ารำคาญ และผมก็ไม่ต้องการให้ตัวอักษรใหญ่ขึ้นกะทันหันบน viewport ที่กว้าง เพราะผมตั้งไว้ที่ขนาดที่อ่านสบายอยู่แล้ว เรื่องแบบนี้เกิดบ่อยเกินไปและทำลายการเข้าถึงอย่างมาก

    • แม้แต่ในโปรเจ็กต์งาน เวลาเสนอให้ทำตามมาตรฐานอย่าง Accept-Language ก็มักถูกปฏิเสธด้วยเหตุผลว่า ผู้ใช้ตั้งค่าแอปเองไม่เป็น งั้นเราควรทำแทนให้หมด
      คิดว่าเรื่องขนาดตัวอักษรก็น่าจะเจอเหตุผลคล้ายกัน

  • ปกติผมจะคอยมองหาเฟรมเวิร์กอย่าง PicoCSS หรือ MVP อยู่เสมอ อันนี้สะดุดตาเพราะดูเหมือนทำมาให้ใช้เป็น จุดเริ่มต้น
    มันดูเหมือนฐานที่ดีสำหรับเอาไปต่อยอด แต่ก็อยากรู้ว่าคนที่เข้าใจงานดีไซน์มากกว่าผมจะคิดยังไง

  • วิธีสลับ CSS variables ด้วย html[data-font-family="serif"] ไม่ค่อยมีประโยชน์เท่าไร น่าจะปล่อยให้ใช้ <html style="font-family:serif"> ไปเลยดีกว่า เพราะไม่ว่าจะในเทมเพลตหรือฝั่ง client script ก็ง่ายพอๆ กัน แถมสั้นกว่าและซับซ้อนน้อยกว่า
    วิธีปัจจุบันอาจทำให้คนเข้าใจผิดว่าพิมพ์แบบ <html data-font-family="some-webfont, serif"> ได้ ทั้งที่จริงใช้ไม่ได้ การใช้ monospace เป็นฟอนต์ทั้งเอกสารก็เป็นตัวเลือกเชิงสไตล์ที่ไม่เหมาะกับความอ่านง่าย และไม่เข้ากับชื่อ “readable.css” ด้วย แต่ก็ชอบความยับยั้งชั่งใจที่จำกัดไว้แค่ generic font family เดียว
    --line-width กับ --line-height ก็เป็นชื่อที่ชวนสับสน อันหนึ่ง “line” หมายถึงเส้นคั่นระหว่างองค์ประกอบ แต่อีกอันหมายถึงบรรทัดข้อความ
    ฝั่งธีมสีก็ยุ่งเหยิงระหว่าง (prefers-color-scheme) กับ (prefers-contrast), [data-theme], [data-high-contrast] และบางค่า/ปฏิสัมพันธ์กันก็ยังไม่ได้ document ไว้ การจับคู่ @media (prefers-contrast: more) and (prefers-color-scheme: dark) ทำให้ได้ #000 บนพื้นหลัง #fff แบบพังชัดเจนเมื่อไม่มี <html data-*> override และยังควรมี color-scheme: dark กับ color-scheme: light ด้วย
    พอเห็น a { color: inherit; } ก็ไม่ค่อยอยากอ่านต่อแล้ว ต่อให้ไม่พูดถึงเรื่อง vertical rhythm แค่ทำให้ลิงก์สืบทอดสีเดิมแล้วเอาเส้นใต้ใน navigation ออก ผู้ใช้จำนวนมากก็จะไม่รู้ด้วยซ้ำว่ามีลิงก์อยู่ ลิงก์ควรเป็นสีน้ำเงิน หรืออย่างน้อยก็มีสีเน้นที่อิ่มสี และควรคง เส้นใต้ เอาไว้ ชื่อนี่ก็ readable.css แท้ๆ เลยยิ่งน่าผิดหวัง

    • เรื่องความอ่านง่ายเป็นสาขาที่มีการศึกษามาหลายสิบปีจนเข้าใจกันค่อนข้างดีแล้ว แต่ก็น่าแปลกที่ยังมีคนไม่ค่อยรู้ โดยเฉพาะเรื่องที่พลาดกันบ่อยคือ ความยาวบรรทัด กับการเลือกฟอนต์ และยังมีปัจจัยอื่นอย่างขนาดตัวอักษร ระยะห่างบรรทัด และคอนทราสต์อีกมาก
      ความยาวบรรทัดมีช่วงต่ำสุดและสูงสุดที่คนส่วนใหญ่จะอ่านได้สบาย โดยคร่าวๆ คือ 50–70 ตัวอักษรต่อบรรทัด กระทู้ Stack Exchange นี้ มีคำตอบดีๆ และยังใกล้กับประเด็นการเข้าถึงด้วย โดย W3C WCAG ในหัวข้อ visual presentation ก็ระบุว่า “ความกว้างไม่เกิน 80 ตัวอักษรหรือ glyph (สำหรับ CJK ไม่เกิน 40)”
      โดยทั่วไปฟอนต์ sans-serif อ่านง่ายที่สุดบนหน้าจอหลากหลายแบบที่สุด และบนจอความละเอียดสูงสมัยใหม่ ฟอนต์ serif ก็มักได้ผลใกล้เคียงกัน ฟอนต์ fixed-width มักทำให้ความชัดเจนในการอ่านลดลงสำหรับคนส่วนใหญ่ จึงไม่ค่อยเหมาะกับเนื้อความหลักนัก ข้อยกเว้นอาจเป็นคนที่คุ้นกับเทอร์มินัล/ตัวแก้ไขโค้ด หรือผู้ใช้ที่มีภาวะ dyslexia ซึ่งบางครั้งกลับอ่านฟอนต์ fixed-width ได้ง่ายกว่า ถ้าไม่แน่ใจ ถึงจะน่าเบื่อแต่ Arial คือทางเลือกที่ปลอดภัยที่สุด และสำหรับข้อมูลเรื่องฟอนต์ monospaced ก็มี กระทู้ Stack Exchange ว่าด้วย monospaced fonts
      เพิ่มเติมยังมี หน้า typography ของรัฐบาลสหรัฐ, ส่วน typography ของ BBC GEL, ส่วน typography ของ Google Material Design, Butterick's Practical Typography ที่เหมาะกับการอ่านลึก และ The Elements of Typographic Style Applied to the Web ที่ก็น่าอ้างอิง

  • เอาจริงๆ ขนาดตัวอักษรเริ่มต้นมันเล็กเกินไปและอ่านยากมาก ผมไม่เข้าใจว่าทำไมถึงเลือกขนาดนี้ สำหรับผมมันไม่ดีทั้งเรื่อง การเข้าถึง และความอ่านง่าย

    • มันมาจากปัญหาสองอย่างของเว็บแพลตฟอร์ม การใช้ฟอนต์และขนาดตามที่เบราว์เซอร์ให้มานั้นดีในแง่ที่เคารพความต้องการที่ผู้ใช้ระบุไว้ชัดเจน แต่ในทางปฏิบัติผู้ใช้ที่ตั้งค่าความชอบเองอย่างชัดเจนมีน้อยมาก และในการตั้งค่าเริ่มต้นจำนวนมาก ผู้ทำเบราว์เซอร์ก็ไม่ค่อยเปลี่ยนค่า default ที่สืบทอดกันมานาน ทำให้ขนาดตัวอักษรที่ได้ออกมาเล็กจนเกือบแตะขีดล่างของความอ่านง่าย
      ที่แย่กว่านั้นคือ font-size ไม่มีความหมายเชิงสัมบูรณ์ที่คงที่ข้ามฟอนต์ font-size: 16px ก็ยังอาจดูต่างกันมากขึ้นกับฟอนต์ที่ใช้ ใน Safari ค่าเริ่มต้นของ sans กับ sans-serif ดูต่างกันแบบนี้: https://github.com/user-attachments/assets/… แม้แต่ในคอมเมนต์นี้เองก็เห็นได้ว่าขนาดฟอนต์ monospace ไม่เข้ากับส่วนที่เหลือ
      สุดท้ายแล้วมันแก้ให้ถูกต้องจริงๆ ได้ยาก และต้องมีบางจุดพังอยู่ดี จึงเหลือเป็นเรื่องว่าผู้ดูแลเว็บจะยอมรับการประนีประนอมแบบไหน สำหรับผม ถ้ามีโหมดอ่านได้ ผมก็มักไม่ค่อยสนใจดีไซน์ของเว็บไซต์เท่าไรนัก แต่เรื่องความกำกวมของ font-size ทุกวันนี้มีทางแก้ที่ใช้ได้อยู่บ้าง: https://matklad.github.io/2025/07/16/font-size-adjust.html
    • ผมใช้ จอ 140ppi แปลกๆ ที่พอตั้งสเกล 125% ซึ่งเหมือนควรจะใช้ กลับดูไม่ดี เลยปล่อยไว้ที่ 100% แล้วค่อยปรับ default zoom ให้พออ่านได้
      ตัวอักษรของเว็บไซต์นี้เล็กมากจนผมสงสัยว่าเหมือนมันกำลังข้ามการซูมที่ตั้งไว้หรือเปล่า สุดท้ายก็ต้องไปเพิ่มค่าขนาดฟอนต์ขั้นต่ำของ Firefox ขึ้นอีกขั้น