The Proportional Web — stylesheet web cho typography tỷ lệ

• The Proportional Web là một thiết kế lấy một phần nguyên tắc từ 《The Elements of Typographic Style》 của Robert Bringhurst và áp dụng vào trình duyệt, đồng thời là phần tiếp nối tỷ lệ của The Monospace Web và một stylesheet có thể tái sử dụng
• Phần thân bài dùng Alegreya và Alegreya SC, phần mã dùng Courier Prime, đồng thời căn chỉnh nhất quán kích thước và nhịp dọc dựa trên cỡ chữ gốc 16px, rem và chiều cao dòng 1.2rem
• Tận dụng word-break, text-wrap, hyphens của trình duyệt hiện đại để áp dụng căn đều hai lề, nhưng nếu khoảng cách giữa các từ hoặc hiện tượng river trong khoảng trắng trở nên kém thì khuyến nghị dùng text-align: left
• Tập trung vào HTML5 ngữ nghĩa để tạo kiểu cho tiêu đề, trích dẫn, hình, bảng và khối mã; side note trên màn hình rộng được đặt ở lề phải và trên màn hình nhỏ sẽ chuyển thành đoạn inline có trang trí
• Phù hợp với các tài liệu thiên về văn xuôi như sách, journal, blog, manual và wiki; không khuyến nghị cho ứng dụng web động; có thể tải mã nguồn GitHub để thêm CSS và JavaScript hoặc dùng cùng Pandoc

---

Từ The Monospace Web sang tỷ lệ

• The Monospace Web đã lan rộng hơn dự kiến đến mức được áp dụng cho blog cá nhân và giao diện ứng dụng
• The Proportional Web là phần kế thừa về mặt tinh thần của dự án đó, được thiết kế để có thể tái sử dụng tự do trong khi dùng phông chữ tỷ lệ thay cho monospaced
• Sau khi đọc 《The Elements of Typographic Style》 của Robert Bringhurst, tác giả bắt đầu bằng việc hiện thực bố cục và typography của cuốn sách trong trình duyệt
• Không giống ấn phẩm in, web không có kích thước trang cố định và còn là một nền tảng có thể lập trình, nên khó áp dụng nguyên xi cùng một bộ quy tắc
  • Thay vào đó, dự án được công bố để mọi người có thể chọn dùng những yếu tố được cho là hữu ích hoặc đẹp mắt
• Việc tạo HTML dùng Pandoc, nhưng stylesheet có thể hoạt động trong môi trường khác nếu chỉnh sửa một chút

Hệ thống phông chữ

• Thiết kế dựa trên nguyên tắc của Bringhurst là chọn một họ chữ đa dụng thay vì trộn nhiều kiểu chữ
• Họ Alegreya được chia dùng theo mục đích
  • Alegreya Regular áp dụng cho phần thân bài và tiêu đề cấp 3
  • Alegreya SC dùng cho tiêu đề cấp 1 ở dạng chữ hoa kiểu title, tiêu đề cấp 2 hiển thị bằng small caps, và các chữ viết tắt inline như HTML
• Các đoạn mã monospaced dùng Courier Prime

Đơn vị tương đối và nhịp dọc

• Mọi kích thước đều được chỉ định bằng rem dựa trên cỡ chữ gốc 16px
• Các cỡ chuẩn là 0.75·0.875·1·1.125·1.25·1.375·1.5·2·2.5·3·4rem, tương ứng với 12·14·16·18·20·22·24·32·40·48·64px
• Chỉ cần thay đổi cỡ chữ gốc là có thể phóng to hoặc thu nhỏ toàn bộ thiết kế
  • Ví dụ, khi chiều rộng màn hình từ 480px trở xuống, có thể đổi font-size của :root thành 14px
• Chiều cao dòng là 1.2rem, và mọi phần tử được cố gắng căn dọc theo bội số của giá trị này
• Không áp dụng cực đoan như The Monospace Web, nhưng vẫn giữ một nhịp căn chỉnh chung xuyên suốt tài liệu

Căn đều hai lề được triển khai trong trình duyệt hiện đại

• Giống như sách của Bringhurst, phần thân bài được dàn theo kiểu căn đều hai lề thay vì ragged right
• Trên web từng có quan niệm mạnh rằng nên tránh căn đều hai lề, nhưng tác giả cho rằng nay có thể thử lại nhờ các tính năng trình duyệt đã được cải thiện
• Việc ngắt dòng và chèn gạch nối được điều khiển bằng các thuộc tính CSS sau
  • word-break
  • text-wrap
  • hyphens
  • hyphenate-limit-chars để kiểm soát phạm vi áp dụng gạch nối
• Căn đều hai lề có nguy cơ tạo ra khoảng cách giữa các từ quá rộng hoặc tạo river trong đoạn văn
• Tài liệu hiện tại cho kết quả ổn với tổ hợp độ dài dòng, cỡ chữ và nội dung, đồng thời chèn soft hyphen thủ công vào một số từ khó
• Nếu không phù hợp với nội dung, đổi sang text-align: left sẽ thích hợp hơn

Thụt đầu dòng và màu sắc

• Các đoạn văn liên tiếp được áp dụng thụt đầu dòng 3ch, tương đương độ rộng của ba ký tự 0
• Đây là cách giúp mắt dễ xác định điểm bắt đầu và kết thúc đoạn hơn, và đã được dùng trong ấn phẩm in ít nhất 500 năm
• Trên web thường dùng khoảng trắng dọc giữa các đoạn thay cho thụt đầu dòng, nhưng kiểu thụt truyền thống vẫn là một lựa chọn hợp lệ
• Màu sắc được giới hạn ở nền trắng và chữ đen
  • Cấu hình tối giản này được ưa chuộng như mặc định cho tài liệu thiên về văn xuôi
  • Tiết kiệm màu sắc giúp tập trung sự chú ý của người đọc vào những yếu tố quan trọng nhất như biểu đồ truyền tải dữ liệu phức tạp

HTML ngữ nghĩa và tiêu đề·nhấn mạnh

• Ngoài một vài class bổ sung, hầu hết đều được cấu thành chỉ bằng markup HTML5 ngữ nghĩa
• Tiêu đề được tạo kiểu theo ba cấp
  • h1: tiêu đề cấp cao nhất ở mức chương
  • h2: tiêu đề mục
  • h3: tiêu đề tiểu mục
• Phần tử <em> được hiển thị bằng chữ nghiêng đúng như kỳ vọng thông thường

Đường phân cách và chi tiết có thể gập mở

• Sách của Bringhurst không đưa ra chỉ dẫn rõ ràng về đường phân cách ngang, nên nó được dùng như một yếu tố trang trí
• Đường phân cách sử dụng ký hiệu U+2767 Rotated Floral Heart Bullet trong khối Unicode Dingbats
• Dùng phần tử <details> có thể ẩn thông tin và mở ra bằng cách nhấn vào nhãn

Side note và tên riêng

• Side note mà Bringhurst sử dụng được hiện thực bằng <aside> trong HTML
• Khi màn hình đủ rộng, nó được hiển thị ở lề phải căn theo phần trên của đoạn trước đó
• Trên màn hình nhỏ, nó được gập thành đoạn inline có trang trí để xử lý responsive
• Tên riêng và tên chính thức được phân biệt bằng class .canonical-name sẽ được render bằng small caps như ví dụ của Bringhurst

Trích dẫn và hình ảnh

• Trích dẫn khối gồm một khối thụt lề và dấu ngoặc kép bao quanh phần thân văn bản
• Phần footer đặt tác giả·tác phẩm·năm
• Ảnh và chú thích được đặt lần lượt trong phần tử <figure> và <figcaption>
• Tên tác giả và tên tác phẩm của hình dùng small caps và chữ nghiêng giống như trích dẫn, đồng thời chia sẻ cùng hệ thống thụt lề

Danh sách và bảng

• Hỗ trợ danh sách bullet và danh sách có thứ tự, đồng thời hiển thị cấu trúc lồng nhau của danh sách có thứ tự theo cách thông thường
• Header của bảng dùng nhãn small caps và đường viền để phân biệt rõ ràng
• Phần còn lại của thiết kế bảng là cấu hình đơn giản, giảm bớt trang trí và dựa vào khoảng cách

Biểu diễn mã

• Toàn bộ thiết kế phù hợp với tài liệu thiên về văn xuôi hơn là tài liệu kỹ thuật lấy mã làm trung tâm, nhưng khối mã và mã inline vẫn được trình bày dễ đọc
• Phần mã dùng Courier Prime để tạo cảm giác hoài cổ kiểu máy chữ và hài hòa với Alegreya cũng như bầu không khí chung của thiết kế
• Các biến style mặc định bao gồm phông chữ, chiều cao dòng, độ dày viền, màu chữ và màu nền
  • --font-family: "Alegreya", serif
  • --line-height: 1.2
  • --border-thickness: 1.5px
  • --text-color: #000
  • --background-color: #fff

Trường hợp sử dụng phù hợp và giấy phép

• Đây là thiết kế dành cho tài liệu web thiên về văn xuôi như sách, journal, blog và manual
• Có thể dùng làm nền cho website cá nhân, một dự án cụ thể hoặc một wiki lớn hơn
• Khả năng cao là không phù hợp với ứng dụng web hoạt động động
• Có thể sao chép phần mình muốn hoặc fork để chỉnh sửa, nhưng cần ghi công tác giả phù hợp
• Có thể đáp ứng điều kiện ghi công bằng cách giữ nguyên thông tin giấy phép trong header của tệp nguồn

Cài đặt và cách dùng Pandoc

• Để bắt đầu nhanh, hãy tải mã nguồn GitHub và đặt vào thư mục the-proportional-web của dự án
• Trong head của HTML, thêm các tệp sau
  • the-proportional-web/index.min.css
  • the-proportional-web/index.js
• Với Pandoc, có thể chỉ định các đối số như độ sâu mục lục, số thứ tự mục, CSS, JavaScript và tắt syntax highlighting để chuyển Markdown sang HTML
• Nếu cần syntax highlighting, có thể cân nhắc template tùy chỉnh như template đã dùng cho đầu ra HTML này
• Trong trường hợp đó, CSS mà Pandoc chèn mặc định cần được loại bỏ khỏi template tùy chỉnh

Các dự án typography liên quan

• The Elements of Typographic Style Applied to the Web của Richard Rutter tuân theo khá nhiều cấu trúc của sách Bringhurst trong khi điều chỉnh lời khuyên cho phù hợp với web design
  • Phạm vi của nó rộng hơn nhiều so với The Proportional Web và tập trung vào chính việc truyền đạt thông tin
  • Trong khi đó, The Proportional Web gần với một showcase trực tiếp trình bày ý tưởng và stylesheet hơn
  • Trang này bị cho là khó đọc trên điện thoại do chênh lệch cỡ chữ lớn, đồng thời có vẻ đã tồn tại ít nhất 20 năm và không được cập nhật trong khoảng 8 năm
  • The Proportional Web đã đầu tư nhiều công sức để vừa giữ tính responsive vừa giữ tính nhất quán khi kích thước màn hình thay đổi, và hai dự án có thể cùng tồn tại vì mục tiêu khác nhau
• Practical Typography của Matthew Butterick là tài liệu thực dụng, trình bày gần như mọi chủ đề cần thiết cho người dùng phổ thông hoặc kỹ sư làm việc gần với typography với độ chi tiết đầy đủ
• Tufte CSS là một công trình có ảnh hưởng và độ nhận diện cao; dù có thể không đồng ý với một số chi tiết dàn trang, nhìn chung đây vẫn là một thành quả vững chắc

Phạm vi áp dụng và công cụ tạo

• Chỉ lấy một phần ý tưởng từ toàn bộ phương pháp luận của Bringhurst và điều chỉnh cho phù hợp với web
• Các công cụ được dùng để tạo tài liệu gồm
  • Pandoc
  • html-minifier
  • esbuild
  • GNU Make
• Ý tưởng thiết kế và bố cục thực tế được lấy rất nhiều từ 《The Elements of Typographic Style》 của Robert Bringhurst

[GN⁺]

Các ý kiến trên Lobste.rs

• Nếu chỉ định kích thước phông chữ bằng giá trị pixel như sau thì sẽ làm tổn hại khả năng tiếp cận, nên cần tránh

  @media screen and (max-width: 480px) {  
    :root {  
      font-size: 14px;  
    }  
  }  
  

  • Đơn vị px trong CSS không còn tương ứng 1:1 với pixel vật lý nữa, mà có nghĩa là max(1/96in, 1 pixel)
  • Cách tôi ưa dùng là đặt font-size của :root thành 0.625 để 1rem tương ứng với 10px, rồi chỉ định 1.6rem hoặc 2rem cho body để toàn bộ trang kế thừa
    Với phông chữ, đừng dùng px, đặc biệt là wv hay wh, mà hãy dùng rem hoặc em; còn với các bố cục không cần phóng to theo kích thước phông chữ thì chủ yếu có thể dùng px, wv, wh, v.v.
    Rất khuyến nghị dùng em hoặc rem thay vì px cho phông chữ, để người dùng thị lực kém có thể sử dụng tính năng thay đổi kích thước văn bản của trình duyệt
    Nếu dùng wv hoặc wh cho kích thước phông chữ, khi phóng to bằng Ctrl-+ trên desktop, innerWidth và innerHeight cũng giảm theo cùng tỷ lệ nên kích thước văn bản vẫn giữ nguyên, vì vậy nên tránh. Việc dùng kết hợp tinh tế như font-size: calc(1.6rem + 2wv) để chỉ tăng lên một chút trên màn hình lớn thì không sao
  • Tốt nhất là không thay đổi kích thước phông chữ mặc định của trình duyệt. Với tài liệu văn bản đơn giản thì ổn, nhưng trên phần lớn web có thể làm vỡ bố cục
    Trên thực tế, rất khó thiết kế các website phức tạp để xử lý mọi kích thước phông chữ tùy ý, và các ràng buộc thiết kế cũng trở nên cực kỳ lớn
    Nếu cần khả năng tiếp cận do khiếm thị, v.v., nên thay đổi mức thu phóng mặc định của trình duyệt. Khi đó website chỉ cần đảm nhiệm thiết kế responsive thông thường, vốn xử lý tự nhiên các kích thước viewport tùy ý, nên thực tế hơn
    Các trình duyệt trước đây từng cho người dùng trực tiếp điều chỉnh kích thước phông chữ, nhưng trải nghiệm người dùng không tốt nên từ vài chục năm trước đã chuyển sang cách phóng to toàn bộ trang

• Không rõ nó có được làm để đọc được cả trên di động hay không

• Ấn tượng vì tái hiện khá tốt typography trong sách của Bringhurst
  Tuy nhiên đôi khi nó lệch khỏi lưới đồng đều có chiều cao dòng cố định. Ví dụ, nếu văn bản đặt bằng Courier bị trộn vào một dòng, chiều cao dòng sẽ tăng lên một chút

  • Để ngăn điều này, cần chỉ định line-height: 1 cho <code>. Tôi không biết có đồng thuận nào về việc 0 có tốt hơn hay không
    Ngoài ra, nếu theo 『The Elements of Typographic Style』 thì ký hiệu của danh sách gạch đầu dòng và danh sách đánh số phải được đặt ở phần lề, nhưng tôi không nhớ đây có phải là yêu cầu rõ ràng hay không

• Kết quả khám phá các cuốn sách typography cổ điển rất tuyệt, và thật tốt khi thấy nhiều hơn kiểu thiết kế dựa trên ràng buộc như thế này trên mạng

• Trong lĩnh vực này, http://lamb.cc/typograph/ ra mắt năm 2009 đến giờ vẫn là tốt nhất đối với tôi

• Việc điều chỉnh kích thước tương đối là tuyệt vời, nhưng tôi cho rằng ghi đè kích thước phông chữ gốc là một sai lầm
  Website nên tôn trọng thiết lập kích thước phông chữ của người dùng, và hệ thống kích thước tương đối được thiết kế dựa trên tỷ lệ và quan hệ rất phù hợp với điều đó

• Rất dễ giả vờ rằng văn bản là thứ quan trọng nhất còn cách trình bày thì không quan trọng, nhưng một bố cục trang được thiết kế cẩn thận sẽ khiến bài blog, tiểu thuyết hoặc bài báo trông chuyên nghiệp hơn nhiều
  Dàn trang xuất sắc phần nào đang trở thành một kỹ năng bị lãng quên, nên những nỗ lực như thế này thật đáng hoan nghênh
  Tôi đã dùng tuft.css từ sớm và dù phải điều chỉnh trong nhiều năm, đến nay vẫn tận dụng tốt. Cái này có vẻ tốt hơn ở một vài khía cạnh, nhưng chưa đến mức để chuyển sang