Hướng đi - Thủ thuật CSS

Anonim

Các directionbất động sản trong CSS đặt theo hướng của dòng chảy nội dung trong một yếu tố ở mức khối. Điều này áp dụng cho các phần tử văn bản, nội dòng và khối nội tuyến. Nó cũng đặt căn chỉnh mặc định của văn bản và hướng dòng chảy của các ô bảng trong một hàng bảng.

.main-content ( direction: rtl; /* Right to Left */ )

Các giá trị hợp lệ là:

  • ltr - Trái sang phải, mặc định
  • rtl - Phải sang trái
  • inherit - kế thừa giá trị của nó từ phần tử mẹ

Văn bản trên trang này được đặt ltrtheo hướng mặc định . Trường hợp sử dụng phổ biến nhất để đặt rtllà cho các trang web có văn bản tiếng Do Thái hoặc tiếng Ả Rập. Đây là một ví dụ về bộ tiếng Ả Rập trong rtl:

طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد

Có một thuộc tính HTML để thiết lập hướng:

Cả thuộc tính CSS và thuộc tính HTML sẽ phân tầng hướng đến các phần tử con. Bạn nên sử dụng thuộc tính HTML, vì thuộc tính này sẽ hoạt động ngay cả khi CSS bị lỗi hoặc không ảnh hưởng đến trang vì bất kỳ lý do gì.

Ngoài ra còn có một thẻ HTML cụ thể có thể được sử dụng để thay đổi hướng của văn bản: phần tử ghi đè hai chiều. Điều này tồn tại nên có một phần tử không có ngữ nghĩa để chỉ sử dụng cho mục đích này. Ví dụ:

This text will go left to right. This text will go right to left.

Để ghép nối tất cả điều này với CSS…

*(dir="ltr") ( direction: ltr; unicode-bidi: embed; ) *(dir="rtl") ( direction: rtl; unicode-bidi: embed; ) bdo(dir="ltr") ( direction: ltr; unicode-bidi: bidi-override; ) bdo(dir="rtl") ( direction: rtl; unicode-bidi: bidi-override; )

“Bidi” = “hai chiều”

Khi tạo bố cục trong thế giới lưới trước pre-flexbox, mọi người thường chọn giữa float và inline-block để tạo cột. Một lợi thế của khối nội tuyến, ngoài việc loại bỏ nhu cầu xóa float, là việc thay đổi thuộc tính hướng cũng sẽ đảo ngược bố cục. Điều này không đúng với float, cần phải đặt lại nếu một trang web hỗ trợ nhiều ngôn ngữ và hướng ngôn ngữ được thay đổi từ ltr sang rtl hoặc ngược lại.

Nếu bạn cần thay đổi hướng của phần tử nội tuyến (so với phần tử cấp khối cha của nó), bạn sẽ cần sử dụng phần tử đó hoặc đảm bảo phần tử nội tuyến đặt thuộc tính unicode-bidi đúng cách:

Some regular text reverse direction text text reverse direction
span(dir) ( unicode-bidi: bidi-override; )

Hỗ trợ trình duyệt

Trình duyệt Chrome Safari Firefox Opera I E Android iOS
2.0+ 1,3+ Bất kì 9,2+ 5.5+ Bất kì 3.1+