Podcast CSS – 012: Thuộc tính logic
Mẫu giao diện người dùng thực sự phổ biến là nhãn văn bản có biểu tượng cùng dòng hỗ trợ.
Biểu tượng nằm ở bên trái văn bản với một khoảng cách nhỏ giữa hai văn bản,
do margin-right cung cấp trên biểu tượng.
Tuy nhiên, có một vấn đề,
vì phương thức này chỉ hoạt động khi hướng văn bản từ trái sang phải.
Nếu hướng văn bản thay đổi thành từ phải sang trái (tức là cách các ngôn ngữ như tiếng Ả Rập đọc) thì biểu tượng sẽ nằm cạnh văn bản.
Google tính khoản này như thế nào trong CSS? Thuộc tính logic giúp bạn giải quyết những trường hợp này. Cùng với nhiều lợi ích khác, chúng cung cấp hỗ trợ tự động và miễn phí để quốc tế hoá. Các thành phần này giúp bạn xây dựng một giao diện người dùng linh hoạt và hoà nhập hơn.
Thuật ngữ
Các tính chất vật lý của đỉnh, bên phải, dưới cùng và bên trái cho biết kích thước thực của khung nhìn. Bạn có thể xem những hành động chuyển đổi này giống như một la bàn tăng trên bản đồ. Mặt khác, thuộc tính logic tham chiếu đến các cạnh của hộp vì chúng liên quan đến luồng nội dung. Do đó, chúng có thể thay đổi nếu hướng văn bản hoặc chế độ viết thay đổi. Đây là một thay đổi lớn so với phong cách định hướng, giúp chúng tôi linh hoạt hơn rất nhiều khi tạo kiểu cho giao diện.
Chặn luồng
Luồng khối là hướng mà các khối nội dung được đặt. Ví dụ: nếu có hai đoạn văn, luồng khối là nơi đoạn thứ hai sẽ xuất hiện. Trong một tài liệu tiếng Anh, luồng khối là từ trên xuống dưới. Hãy nghĩ về điều này trong ngữ cảnh của các đoạn văn bản nối tiếp nhau, từ trên xuống dưới.
Luồng cùng dòng
Luồng cùng dòng là cách văn bản di chuyển trong một câu.
Trong một tài liệu tiếng Anh, quy trình cùng dòng được viết từ trái sang phải.
Nếu bạn thay đổi ngôn ngữ tài liệu của trang web thành tiếng Ả Rập (<html lang="ar">),
thì luồng cùng dòng sẽ là từ phải sang trái.
Văn bản sẽ di chuyển theo hướng được xác định bởi chế độ ghi của tài liệu.
Bạn có thể thay đổi hướng bố cục của văn bản bằng thuộc tính writing-mode.
Lựa chọn này có thể áp dụng cho toàn bộ tài liệu hoặc cho từng thành phần riêng lẻ.
Luồng tương đối
Trước đây trong CSS,
chúng ta chỉ có thể áp dụng các thuộc tính như lề so với hướng của các cạnh.
Ví dụ: margin-top được áp dụng cho phần trên cùng của phần tử.
Với các thuộc tính logic, margin-top sẽ trở thành margin-block-start.
Điều này có nghĩa là bất kể ngôn ngữ và hướng văn bản là gì,
luồng chặn có các quy tắc lề thích hợp.