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.
Kích thước
Để ngăn một phần tử vượt quá chiều rộng hoặc chiều cao nhất định: hãy viết một quy tắc như sau:
.my-element {
max-width: 150px;
max-height: 100px;
}
Các giá trị tương đương 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 thuộc tính logic, quy tắc chiều rộng và chiều cao tối đa đó sẽ trông giố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 cùng và bên trái, sử dụng bắt đầu và kết thúc. Tính năng này cho phép bạn bắt đầu theo khối, kết thúc cùng dòng, kết thúc theo khối và bắt đầu cùng dòng. Những quy tắ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ế độ viết.
Ví dụ: để căn chỉnh văn bản sang 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à điều chỉnh cho phù hợp với cơ thể,
mà là đến đầu hướng đọc,
điều này không hữu ích.
Với các giá trị logic, sẽ có nhiều giá trị start và end hữu ích hơn ánh xạ theo hướng văn bản.
Quy tắc căn chỉnh văn bản giờ đây có dạng như sau:
p {
text-align: end;
}
Giãn cách và vị trí
Thuộc tính logic cho margin, padding và inset
giúp các phần tử định vị cũng như xác định cách những phần tử này tương tác với nhau qua chế độ viết 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 các hướng,
nhưng điểm khác biệt chính là khi chế độ viết thay đổi, chúng cũng 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 theo chiều dọc bên trong với padding và đẩy nó ra từ bên trái bằng margin.
Thuộc tính top cũng di chuyển xuống dưới.
Với các thuộc tính logic tương đương, giá trị này 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 với padding và đẩy nó ra từ thời điểm bắt đầu cùng dòng bằng margin.
Thuộc tính inset-block di chuyển vào từ phần đầu khối.
Thuộc tính inset-block không phải là cách viết tắt duy nhất có các thuộc tính logic.
Quy tắc này có thể được rút gọn hơn,
bằng cách sử dụng các phiên bản viết tắt của các 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 ở phía dưới cùng và bên phải với 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à khối kết thúc và kết thúc cùng dòng.
Đơn vị
Các thuộc tính logic có hai đơn vị mới: vi và vb.
Đơn vị vi chiếm 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 chiếm 1% 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 liên kết 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 khung nhìn,
thì việc sử dụng đơn vị vi sẽ tự động chuyển kích thước đó thành trên cùng xuống dưới nếu chế độ viết là dọc.
Sử dụng thuộc tính logic một cách thực tế
Các thuộc tính logic và chế độ ghi không chỉ dành cho mục đích quốc tế hoá. Bạn có thể sử dụng các thành phần này để tạo giao diện người dùng linh hoạt hơn.
Nếu bạn có biểu đồ có nhãn trên trục X và trục Y, bạn có thể muốn văn bản trên nhãn Y đọc theo chiều dọc.
Vì nhãn trục Y trong bản minh hoạ có writing-mode là vertical-rl,
bạn có thể sử dụng cùng các giá trị margin 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 của khối nằm ở bên phải đối vớ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
Hiện tại, chúng ta đã đề cập đến các thuộc tính logic, kiến thức này có thể áp dụng được 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ợ tất cả các hướng đọc,
bạn cần sử 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à giãn cách thích hợp.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về tính chất logic
Khi bạn viết bằng tay, cổ tay bạn sẽ di chuyển theo trục logic nào?
inlineblockChọn tất cả những thuộc tính có thể hưởng lợi từ 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.Bên logic nào của từ được gạch chân?