Hướng dẫn sử dụng thuộc tính HTML dir

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

1- HTML Direction

Ngôn ngữ HTML được tạo ra để đảm bảo rằng nó có thể tạo ra các website phù hợp với tất cả các nền văn hóa khác nhau. Tiếng Ả Rập, một trong bốn ngôn ngữ phổ biến nhất trên thế giới. Nội dung trong các cuốn sách và website của người Ả Rập được viết theo chiều từ phải sang trái (Right To Left - RTL), điều này có thể khá lạ lẫm với các nước còn lại.
Chẳng hạn, dưới đây là một website của chính phủ IRAQ.
Để nội dung của một phần tử hiển thị theo chiều từ phải sang trái (RTL) chúng ta sử dụng thuộc tính (attribute) dir='rlt':
dir-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>HTML Dir Attribute</title>
      <meta charset="UTF-8"/>
      <style>
          div {
            border: 1px solid green;
            padding: 5px;
            margin: 10px 0;
          }
      </style>
   </head>
   <body>
       <h1>HTML Dir Attribute</h1>
       <hr/><br/>

       <div>
           <h3>LTR (Left-to-Right) Direction! (Default)</h3>
           I am a Text.
        </div>

       <div dir = "rtl">
          <h3>RTL (Right-to-Left) Direction!</h3>
          I am a Text.
       </div>

   </body>
</html>
Hầu hết các trình duyệt hỗ trợ thuộc tính (attribute) dir, ngoại trừ Internet ExplorerEdge.
<element dir = "ltr|rtl|auto">..</element>
Giá trị Mô tả
ltr Được sử dụng cho các ngôn ngữ viết theo chiều từ trái sang phải, chẳng hạn tiếng Anh.
rlt Được sử dụng cho các ngôn ngữ viết theo chiều từ phải sang trái, chẳng hạn tiếng Ả Rập.
auto Trình duyệt sẽ dựa trên tác nhân người dùng (user agent) để quyết định. Nó sử dụng một thuật toán cơ bản để phân tích (parse) nội dung bên trong phần tử cho tới khi tìm thấy một ký tự có tính định hướng mạnh (strong directionality), sau đó áp dụng hướng đó cho toàn bộ phần tử.
Chú ý: HTML5 hỗ trợ thuộc tính (attribute) dir cho tất cả các phần tử, trong khi đó HTML4 hỗ trợ thuộc tính này cho tất cả các phần tử ngoại trừ <base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, <script>.

Xem thêm các chuyên mục: