Tuân thủ tỷ lệ văn bản của hệ điều hành

Tính năng web: <meta name="text-scale">

Tổng quan

Người dùng khiếm thị thường định cấu hình tỷ lệ văn bản ở cấp hệ điều hành (chẳng hạn như Kiểu động trên iOS hoặc Tỷ lệ cỡ chữ trên Android/ChromeOS). Theo mặc định, trình duyệt di động sẽ bỏ qua các chế độ cài đặt hỗ trợ tiếp cận ở cấp hệ điều hành này để ngăn các trang web cũ, có kích thước pixel cố định bị hỏng về mặt hình ảnh.

Thay vì giữ trang ở dạng tĩnh hoặc dựa vào các phép tính bố cục JavaScript tuỳ chỉnh, dễ hỏng, hãy chọn điều chỉnh tỷ lệ văn bản của hệ điều hành gốc bằng thẻ <meta name="text-scale">. Khi hoạt động, trình duyệt sẽ tự động điều chỉnh cỡ chữ gốc (1rem) cho phù hợp với lựa chọn ưu tiên của người dùng về hệ điều hành, cho phép tất cả cỡ chữ, bố cục và khoảng cách tương đối (rem/em) tự động điều chỉnh một cách mượt mà.

Triển khai

1. Chọn sử dụng tính năng Điều chỉnh tỷ lệ văn bản của hệ điều hành

Đặt phần tử <meta name="text-scale"> bên trong phần tử <head> của tài liệu. Điều này báo hiệu cho các trình duyệt hỗ trợ rằng bố cục của bạn hiện đại, thích ứng và an toàn để điều chỉnh theo tỷ lệ:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  
  <!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
  <meta name="text-scale" content="scale" />
  
  <title>Adaptive Accessibility Layout</title>
</head>

2. Sử dụng kiểu chữ và khoảng cách tương đối

Xác định cỡ chữ bằng đơn vị tương đối (rem hoặc em) thay vì pixel cố định (px). Sử dụng giá trị không có đơn vị cho chiều cao dòng để chúng điều chỉnh theo tỷ lệ với cỡ chữ được tính toán của từng phần tử.

Sử dụng các đơn vị tương đối cho lề và khoảng đệm khi khoảng cách được kết hợp với kích thước văn bản hoặc phải điều chỉnh khi văn bản được điều chỉnh theo tỷ lệ. Khoảng cách không phụ thuộc vào văn bản có thể sử dụng các đơn vị cố định khi thích hợp, miễn là việc tăng cỡ chữ không khiến văn bản bị cắt bớt, chồng chéo, mất nội dung hoặc bố cục không sử dụng được:

body {
  font-family: system-ui, sans-serif;
  /* Inherits the root font-size, which scales automatically with the OS setting */
  line-height: 1.5;      /* Unitless so it scales proportionally with computed font-size */
  padding: 1.5rem;       /* Scales proportionally to prevent dense crowding at larger scales */
}

h1 {
  font-size: 2.25rem;    /* Scales proportionally to the root base */
  margin-bottom: 1rem;
}

Chỉ đặt cỡ chữ cơ bản trên body khi thiết kế cần một cỡ chữ khác với cỡ chữ mặc định được kế thừa của trình duyệt; nếu không, hãy để cỡ chữ được kế thừa. Đặt kích thước cho các phần tử cụ thể, chẳng hạn như tiêu đề, bằng các đơn vị tương đối như rem hoặc em. Sử dụng rem cho kích thước tương ứng với cỡ chữ gốc và em khi kích thước phụ thuộc vào cỡ chữ của phần tử mẹ. Đừng đặt cỡ chữ tuỳ chỉnh trên :root hoặc html.

Kiểu chữ linh hoạt

Kiểu chữ linh hoạt CÓ THỂ sử dụng các đơn vị tương ứng với khung nhìn như vw, miễn là cỡ chữ cũng bao gồm một thành phần tương ứng với phông chữ như rem hoặc em. Để biết thêm các kỹ thuật điều chỉnh tỷ lệ linh hoạt, bao gồm cả đơn vị truy vấn vùng chứa và clamp(), hãy xem bài viết Điều chỉnh tỷ lệ linh hoạt.

Tránh chỉ định kích thước văn bản bằng đơn vị khung nhìn:

/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
  font-size: 5vw;
}

Thay vào đó, hãy kết hợp giá trị tương đối của phông chữ với tỷ lệ tương đối của khung nhìn và sử dụng các giới hạn tối thiểu và tối đa tương đối:

.heading {
  font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}

Kiểm tra để đảm bảo văn bản có thể được đổi kích thước lên ít nhất 200% so với kích thước mặc định mà không làm mất nội dung hoặc chức năng. Đối với kiểu chữ linh hoạt, một quy tắc hữu ích là giữ cho cỡ chữ tối đa không lớn hơn 2,5 lần cỡ chữ tối thiểu. Ngoài ra, hãy kiểm tra việc dàn lại nội dung ở chiều rộng khung nhìn 320 pixel CSS (tương đương với mức thu phóng 400% từ khung nhìn rộng 1280 pixel CSS); nội dung PHẢI luôn có sẵn mà không cần cuộn hai chiều, trừ trường hợp cần thiết.

3. Sử dụng điểm ngắt thích ứng có thể mở rộng

Điểm ngắt thích ứng KHÔNG ĐƯỢC giả định rằng văn bản sẽ giữ nguyên kích thước mặc định. Khi một điểm ngắt được dùng để phản hồi không gian có sẵn cho văn bản, hãy ưu tiên bố cục dựa trên nội dung, truy vấn vùng chứa hoặc truy vấn đa phương tiện dựa trên em thay vì ngưỡng pixel cố định.

Kiểm thử bố cục thích ứng khi bật tính năng điều chỉnh tỷ lệ văn bản của hệ điều hành và thu phóng trình duyệt. Văn bản PHẢI dễ đọc và nội dung PHẢI hiển thị mà không bị chồng chéo, cắt bớt hoặc cuộn ngang.

4. Đảm bảo nội dung được gói gọn và chiều cao linh hoạt

Khi văn bản tăng tỷ lệ, các phần tử cần thêm không gian theo chiều dọc và chiều ngang để tránh bị cắt bớt hoặc chồng chéo. Để đảm bảo các thành phần luôn hoạt động ổn định, hãy thiết kế bố cục sao cho có thể mở rộng linh hoạt xung quanh nội dung thay vì buộc phải sử dụng toạ độ cố định:

  • Cho phép vùng chứa văn bản mở rộng: Các thành phần và vùng chứa văn bản PHẢI có thể mở rộng để chứa văn bản được điều chỉnh tỷ lệ. Tránh các giá trị height hoặc block-size cố định và các giá trị max-height hoặc max-block-size hạn chế có thể gây ra tình trạng cắt bớt hoặc tràn. Ưu tiên định cỡ dựa trên nội dung; chỉ sử dụng min-height hoặc min-block-size khi cần kích thước tối thiểu.
  • Cho phép xuống dòng tự nhiên: Không hạn chế việc xuống dòng văn bản theo trục cùng dòng bằng white-space: nowrap trên các khối chứa câu. Để văn bản tự động xuống dòng một cách tự nhiên.
  • Sử dụng Flexbox linh hoạt và gói lưới (Ví dụ không bắt buộc): Đối với thư viện thẻ nhiều cột, hãy sử dụng các cột dàn lại như repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) để các mục xếp chồng theo chiều dọc nếu vượt quá ngưỡng chiều rộng tương đối:
/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Use min-height so the box expands vertically when the font is enlarged */
  min-height: 10rem;
}

5. KHÔNG ghi đè cỡ chữ gốc

Khi chọn sử dụng thông qua phần tử <meta name="text-scale" content="scale">, KHÔNG đặt rõ ràng font-size gốc trong biểu định kiểu. Điều này bao gồm các nội dung khai báo trên :root hoặc html, đồng thời áp dụng cho các đơn vị tuyệt đối, đơn vị tương đối và giá trị được tính toán.

Ví dụ: không ghi đè cỡ chữ gốc bằng một giá trị cố định:

/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
  font-size: 16px;
}

Đừng kết hợp lựa chọn sử dụng <meta name="text-scale" content="scale"> với env(preferred-text-scale) để áp dụng tỷ lệ văn bản của hệ điều hành theo cách thủ công. Trình duyệt áp dụng tỷ lệ thông qua lựa chọn sử dụng meta, vì vậy, việc sử dụng cả hai có thể dẫn đến việc điều chỉnh tỷ lệ gấp đôi:

/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
  font-size: calc(1rem * env(preferred-text-scale));
}

Để trình duyệt quyết định cỡ chữ gốc. Trình duyệt tự động xử lý tỷ lệ văn bản của hệ điều hành và áp dụng tỷ lệ đó cho nội dung có kích thước tương ứng với cỡ chữ gốc.

Chiến lược dự phòng

Trên các trình duyệt không hỗ trợ <meta name="text-scale" content="scale">, bố cục sẽ giảm xuống một cách linh hoạt. Trang sẽ hiển thị bố cục ở cỡ chữ cơ bản mặc định chuẩn của trình duyệt (thường là 16px) và người dùng vẫn có thể sử dụng các tuỳ chọn thu phóng trang thủ công chuẩn hoặc chụm để thu phóng.