HTML - dir 屬性

HTML dir 屬性用於控制多語言網站中的文字方向，以確保內容正確對齊。

網頁設計師可以透過正確設定 dir 來設計對使用者更友好、更易訪問的網頁，以適應各種書寫系統和文化偏好。它可以應用於許多 HTML 元素，以指定文字應從左到右 (ltr) 顯示還是從右到左 (rtl) 顯示。

語法

<element dir = "ltr | rtl | auto ">

此屬性接受語法中提到的任何一個屬性。

應用於

大多數 HTML 元素都支援 dir 屬性。但是，一些 HTML 元素確實不支援 dir 屬性，特別是那些不涉及文字內容或文字方向性不影響其視覺表示的元素。例如 <html>、<head>、<title>、<meta>、<hr>

HTML dir 屬性示例

下面的示例將說明 HTML dir 屬性，以及我們在哪裡以及如何使用此屬性！

使用 dir 屬性設定預設方向

在以下示例中，我們將建立兩個 p 元素，並在其中一個 p 元素上使用 dir="ltr"，它將正常渲染。

<!DOCTYPE html>
<html>

<head>
   <title>HTML dir attribute</title>
</head>

<body>
   <p>
      This is a sample Text direction is not set
   </p>
   <p dir="ltr">
      This is a sample Text direction is left to right  set
   </p>
</body>

</html>

從右到左和從左到右方向的內容

在以下示例中，讓我們看看 dir 屬性的用法，以及當我們使用不同值的 dir 屬性時它將如何渲染內容。

<!DOCTYPE html>
<html>

<head>
   <title>HTML dir attribute</title>
</head>

<body>
   <p dir="rtl">
      This paragraph is in English but 
      incorrectly goes right to left.
   </p>
   <p dir="ltr">
      This paragraph is in English and 
      correctly goes left to right.
   </p>
   <hr>
   <p>
      هذه الفقرة باللغة العربية 
      ولكن بشكل خاطئ من اليسار إلى اليمين.
   </p>
   <p dir="auto">
      هذه الفقرة باللغة العربية ، لذا
      يجب الانتقال من اليمين إلى اليسار.
   </p>
</body>

</html>

使用 dir 屬性設定自動方向

請考慮以下示例，我們將在此示例中將 dir 設定為 auto。這將自動查詢最佳方向來渲染文字。

<!DOCTYPE html>
<html>

<head>
   <title>HTML dir attribute</title>
</head>

<body>
   <p dir="auto">
      Tutorialspoint is best for Free Tutorials
   </p>
   
   <p dir="auto">
      لوريم إيبسوم هو ببساطة نص 
      وهمي من صناعة الطباعة
      والتنضيد. لقد كان لوريم إيبسوم
      هو النص الوهمي القياسي في هذه
      الصناعة منذ القرن السادس عشر
   </p>
</body>

</html>

支援的瀏覽器

屬性
dir	4.0	5.5	2.0	3.1	9.6

html_attributes_reference.htm

列印頁面