Podcast CSS – 012: Thuộc tính logic
Một mẫu giao diện người dùng rất 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 trống nhỏ giữa hai văn bản, do margin-right cung cấp trên biểu tượng.
Mặc dù vậy, đây là một vấn đề vì tính năng này sẽ 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 từ phải sang trái (cách các ngôn ngữ như tiếng Ả Rập đọc) thì biểu tượng sẽ nằm trên văn bản.
Bạn tính đến trường hợp 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, miễn phí cho việc 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à toàn diện hơn.
Thuật ngữ
Các tính chất vật lý của trên, bên phải, dưới cùng và bên trái đề cập đến kích thước thực của khung nhìn. Bạn có thể coi những hình ảnh này như một bông hồng la bàn 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 sự thay đổi lớn so với kiểu định hướng và giúp chúng ta linh hoạt hơn rất nhiều khi tạo kiểu cho giao diện.
Chặn quy trình
Luồng khối là hướng đặt các khối nội dung. Ví dụ: nếu có hai đoạn văn, luồng khối là nơi đoạn thứ hai sẽ được sử dụng. Trong một tài liệu tiếng Anh, luồng khối là từ trên xuống dưới. Hãy xem xét điều này trong ngữ cảnh các đoạn văn bản nối tiếp nhau, từ trên xuống dưới.
Luồng nội tuyến
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 là từ trái sang phải.
Nếu bạn thay đổi ngôn ngữ tài liệu của trang web sang tiếng Ả Rập (<html lang="ar">),
luồng nội tuyến sẽ là từ phải sang trái.
Văn bản di chuyển theo hướng được xác định bởi chế độ viết của tài liệu.
Bạn có thể thay đổi hướng bố trí văn bản bằng thuộc tính writing-mode.
Bạn có thể áp dụng hiệu ứng này cho toàn bộ tài liệu hoặc cho từng thành phần riêng lẻ.
Lưu lượng tương đối
Trước đây trong CSS, chúng tôi chỉ có thể áp dụng các thuộc tính như lề so với hướng của các thuộc tí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 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 ra sao, luồng khối đều có quy tắc lề thích hợp.
Kích thước
Để ngăn một thành phần vượt quá chiều rộng hoặc chiều cao nhất định, hãy viết quy tắc như sau:
.my-element {
max-width: 150px;
max-height: 100px;
}
Các giá trị tương đương tương đối về luồng là max-inline-size và max-block-size.
Bạn cũng có thể sử dụng min-block-size và min-inline-size thay vì min-height và min-width.
Với các thuộc tính logic, quy tắc chiều rộng và chiều cao tối đa sẽ có dạng như sau:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
Bắt đầu và kết thúc
Thay vì sử dụng các hướng như trên, phải, dưới và trái, hãy dùng các hướng bắt đầu và kết thúc. Điều này cung cấp cho bạn quy trình bắt đầu khối, kết thúc cùng dòng, kết thúc khối và bắt đầu cùng dòng. Việc này cho phép bạn áp dụng các thuộc tính CSS phản hồi các thay đổi về chế độ ghi.
Ví dụ: để căn chỉnh văn bản bên phải, bạn có thể sử dụng CSS này:
p {
text-align: right;
}
Nếu mục tiêu của bạn không phải là căn chỉnh theo bên phải vật lý mà là để bắt đầu hướng đọc, thì điều này không hữu ích.
Với các giá trị logic, có nhiều giá trị start và end hữu ích hơn liên kết với hướng văn bản.
Quy tắc căn chỉnh văn bản hiện có dạng như sau:
p {
text-align: end;
}
Giãn cách và định vị
Các thuộc tính logic cho margin, padding và inset giúp các phần tử định vị và xác định cách những phần tử này tương tác với nhau trong các chế độ viết một cách dễ dàng và hiệu quả hơn.
Các thuộc tính liên quan đến lề và khoảng đệm vẫn là ánh xạ trực tiếp đến hướng, nhưng điểm khác biệt chính là khi chế độ ghi thay đổi, chúng sẽ thay đổi theo.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
Thao tác này sẽ thêm một số không gian bên trong theo chiều dọc bằng padding và đẩy nó ra từ bên trái bằng margin.
Thuộc tính top cũng dịch chuyển xuống dưới.
Thay vào đó, các thuộc tính logic tương đương sẽ có dạng như sau:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
Thao tác này sẽ thêm một số không gian cùng dòng bên trong bằng padding và đẩy nó ra từ phần bắt đầu cùng dòng bằng margin.
Thuộc tính inset-block di chuyển mã vào phía trong từ bắt đầu khối.
Thuộc tính inset-block không phải là tuỳ chọn viết tắt duy nhất có các thuộc tính logic.
Quy tắc này có thể được thu gọn hơn nữa bằng cách sử dụng các phiên bản viết tắt của thuộc tính lề và khoảng đệm.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
Đường viền
Bạn cũng có thể thêm border và border-radius bằng các thuộc tính logic.
Để thêm đường viền ở dưới cùng và bên phải bằng bán kính bên phải, bạn có thể viết một quy tắc như sau:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
Hoặc bạn có thể sử dụng các thuộc tính logic như sau:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
end-end trong border-end-end-radius là phần kết thúc khối và cùng dòng.
Đơn vị
Thuộc tính logic mang lại 2 đơn vị mới: vi và vb.
Đơn vị vi bằng 1% kích thước khung nhìn theo hướng cùng dòng.
Thuộc tính phi logic tương đương là vw.
Đơn vị vb là 1% của khung nhìn theo hướng khối.
Thuộc tính phi logic tương đương là vh.
Các đơn vị này sẽ luôn ánh xạ với hướng đọc.
Ví dụ: nếu bạn muốn một phần tử chiếm 80% không gian cùng dòng có sẵn của một khung nhìn, thì việc sử dụng đơn vị vi sẽ tự động chuyển kích thước đó lên trên xuống dưới cùng nếu chế độ ghi là dọc.
Sử dụng các thuộc tính logic một cách thực tế
Các thuộc tính logic và chế độ viết không chỉ dùng để quốc tế hoá. Bạn có thể sử dụng chúng để tạo ra giao diện người dùng linh hoạt hơn.
Nếu có một biểu đồ có các nhãn trên trục X và trục Y, thì bạn nên đọc văn bản trên nhãn Y theo chiều dọc.
Vì nhãn trục Y trong bản minh hoạ có writing-mode là vertical-rl, nên bạn có thể sử dụng các giá trị margin giống nhau trên cả hai nhãn.
Giá trị margin-block-start áp dụng cho cả hai nhãn
vì điểm bắt đầu khối nằm ở bên phải trục Y và ở trên cùng đối với trục X.
Các cạnh bắt đầu của khối có đường viền màu đỏ để bạn có thể nhìn thấy chúng.
Giải quyết vấn đề về biểu tượng
Sau khi tìm hiểu về các thuộc tính logic, chúng ta có thể áp dụng kiến thức này vào vấn đề thiết kế mà chúng ta bắt đầu.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
Lề đã được áp dụng ở bên phải của phần tử biểu tượng.
Để khoảng cách giữa biểu tượng và văn bản hỗ trợ mọi hướng đọc, bạn cần dùng thuộc tính margin-inline-end.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
Giờ đây, bất kể hướng đọc là gì, biểu tượng sẽ tự định vị và không gian một cách thích hợp.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về các tính chất logic
Khi bạn viết bằng tay, cổ tay của bạn đang di chuyển theo trục logic nào?
inlineblockChọn tất cả những mục có thể hưởng lợi từ các thuộc tính logic
flex-start, block-end và inline-startblock-start và inline.inline-size và max-block-size.border-end-end-radius.Mặt logic nào của từ được gạch chân?