CSS - Thuộc tính Unicode-bidi: Khám phá Văn bản 双向
Xin chào các bạnfuture web developers! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của CSS và khám phá một thuộc tính có thể听起来有点吓人 ban đầu: unicode-bidi. Nhưng đừng lo lắng, vào cuối bài hướng dẫn này, bạn sẽ xử lý văn bản 双向 như một chuyên gia!
Thuộc tính Unicode-bidi là gì?
Trước khi chúng ta đi vào chi tiết, hãy hiểu unicode-bidi là về điều gì. Hãy tưởng tượng bạn đang viết một trang web đa ngôn ngữ bao gồm cả tiếng Anh (từ trái sang phải) và tiếng Ả Rập (từ phải sang trái). Bạn làm thế nào để đảm bảo rằng mỗi ngôn ngữ hiển thị đúng cách? Đó là nơi unicode-bidi đến để cứu giúp!
Thuộc tính unicode-bidi là người bạn đồng hành đáng tin cậy của bạn khi xử lý văn bản 双向 trong CSS. Nó giúp bạn kiểm soát cách văn bản 双向 được xử lý trong tài liệu, đảm bảo rằng nội dung của bạn hiển thị đúng dù có bất kỳ hướng viết nào.
Các giá trị có thể
Hãy cùng xem xét các giá trị có thể cho thuộc tính unicode-bidi:
| Giá trị | Mô tả |
|---|---|
| normal | Element không mở thêm một mức độ nhúng |
| embed | Mở thêm một mức độ nhúng |
| bidi-override | Tạo một override cho thuật toán 双向 |
| isolate | Element được cách ly khỏi anh em của nó |
| isolate-override | Kết hợp hiệu ứng của cả 'isolate' và 'bidi-override' |
| plaintext | Element được cách ly và định dạng 双向 được đặt lại |
Đừng lo lắng nếu chúng có vẻ rối rắm bây giờ. Chúng ta sẽ khám phá từng cái trong chi tiết với các ví dụ!
Áp dụng cho
Thuộc tính unicode-bidi có thể được áp dụng cho tất cả các element. Tuy nhiên, nó thường được sử dụng với các element inline hoặc các element đã được đặt thành display: inline.
Cú pháp DOM
Để sử dụng unicode-bidi trong JavaScript, bạn có thể sử dụng cú pháp sau:
object.style.unicodeBidi = "value"Bây giờ, hãy cùng xem xét từng giá trị và xem chúng hoạt động như thế nào!
CSS unicode-bidi - giá trị normal
Giá trị normal là thiết lập mặc định. Nó không mở thêm một mức độ nhúng với respect đến thuật toán 双向.
<p style="unicode-bidi: normal;">
This is English text. ذلك نص عربي.
</p>Trong ví dụ này, văn bản sẽ được hiển thị như sau:
This is English text. ذلك نص عربي.
Văn bản tiếng Anh là từ trái sang phải, trong khi văn bản tiếng Ả Rập là từ phải sang trái, theo hướng tự nhiên của chúng.
CSS unicode-bidi - giá trị embed
Giá trị embed mở thêm một mức độ nhúng với respect đến thuật toán 双向.
<p style="unicode-bidi: embed; direction: rtl;">
This is English text. ذلك نص عربي.
</p>Điều này sẽ hiển thị như sau:
.ذلك نص عربي This is English text.
Ở đây, toàn bộ đoạn văn được coi là từ phải sang trái, nhưng văn bản tiếng Anh duy trì hướng từ trái sang phải trong ngữ cảnh RTL tổng thể.
CSS unicode-bidi - giá trị bidi-override
Giá trị bidi-override tạo một override cho thuật toán 双向. Nó ép hướng của văn bản khớp với thuộc tính direction.
<p style="unicode-bidi: bidi-override; direction: rtl;">
This is English text. ذلك نص عربي.
</p>Điều này sẽ hiển thị như sau:
.ibrac sun edah .txet hsilgnE si sihT
Trong trường hợp này, tất cả văn bản được coi là từ phải sang trái, ngay cả khi đảo ngược thứ tự các ký tự trong văn bản tiếng Anh.
CSS unicode-bidi - giá trị isolate
Giá trị isolate cách ly element khỏi anh em của nó trong terms của định dạng 双向.
<p>This is <span style="unicode-bidi: isolate; direction: rtl;">ذلك نص عربي</span> some English text.</p>Điều này sẽ hiển thị như sau:
This is ذلك نص عربي some English text.
Văn bản tiếng Ả Rập được cách ly và hiển thị từ phải sang trái, trong khi văn bản tiếng Anh xung quanh không bị ảnh hưởng.
CSS unicode-bidi - giá trị isolate-override
Giá trị isolate-override kết hợp hiệu ứng của cả 'isolate' và 'bidi-override'.
<p>This is <span style="unicode-bidi: isolate-override; direction: rtl;">English text</span> in a sentence.</p>Điều này sẽ hiển thị như sau:
This is txet hsilgnE in a sentence.
Văn bản trong thẻ span được cách ly và đảo ngược hoàn toàn.
CSS unicode-bidi - giá trị plaintext
Giá trị plaintext cách ly element và đặt lại định dạng 双向 thành hướng ngầm định.
<p style="direction: rtl;">
This is <span style="unicode-bidi: plaintext;">some English text</span> بعض النص العربي
</p>Điều này sẽ hiển thị như sau:
بعض النص العربي some English text This is
Văn bản tiếng Anh trong thẻ span được hiển thị theo hướng tự nhiên từ trái sang phải, bất kể hướng từ phải sang trái của parent.
CSS unicode-bidi - Các thuộc tính liên quan
Khi làm việc với unicode-bidi, bạn thường sẽ gặp các thuộc tính liên quan này:
| Thuộc tính | Mô tả |
|---|---|
| direction | Đặt hướng văn bản |
| writing-mode | Định nghĩa liệu các dòng văn bản được sắp xếp theo chiều ngang hay dọc |
Nhớ rằng, thuộc tính unicode-bidi làm việc cùng với thuộc tính direction để kiểm soát luồng của văn bản 双向.
Kết luận
Chúc mừng! Bạn vừa mới đi sâu vào thế giới của unicode-bidi. Thuộc tính này có thể看起来 phức tạp ban đầu, nhưng nó là một công cụ vô giá khi làm việc với các trang web đa ngôn ngữ. Nhớ rằng, thực hành làm nên完美, vì vậy đừng ngần ngại thử nghiệm với các giá trị khác nhau và xem chúng ảnh hưởng như thế nào đến văn bản của bạn.
Trong hành trình phát triển web của bạn, bạn sẽ gặp nhiều tình huống nơi việc hiểu văn bản 双向 là rất quan trọng. Dù bạn đang tạo một trang web cho khán giả toàn cầu hay làm việc trên một dự án bản địa hóa, kỹ năng bạn đã học hôm nay sẽ phục vụ bạn rất tốt.
Tiếp tục lập mã, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ! Thế giới phát triển web đầy những thử thách thú vị, và việc thành thạo các thuộc tính như unicode-bidi chỉ là bắt đầu của hành trình phiêu lưu của bạn. Chúc bạn lập mã vui vẻ!
Credits: Image by storyset