Using the <li dir="..."> tag can cause list indicators to break

Question

Using the <li dir="..."> tag can cause list indicators to break

Is there a method to utilize dir tags for <li> elements without disrupting the list indicators? Logically, they should all align on the same side and RTL <li> elements in an otherwise LTR document should either be left-aligned if it's only a single underfilled line, or else aligned from the right. Why do the reversed direction indicators end up so far in the margin?

ul {
  max-width: 15em;
  margin: auto;
}

<!DOCTYPE HTML>
<html>

<body>
  <ul dir="ltr" lang="en">
    <li>English</li>
    <li dir="rtl" lang="ar">العربية</li>
    <li>English</li>
  </ul>
  <ul dir="rtl" lang="ar">
    <li>العربية</li>
    <li dir="ltr" lang="en">English</li>
    <li>العربية</li>
  </ul>
</body>

</html>

html css html-lists direction

Answer 1

Answer №1

This code is functioning flawlessly. Achieve the desired result by simply implementing some CSS:

<!DOCTYPE HTML>
<html>
<style type="text/css>
  ul {
    direction: rtl;
    max-width: 15em;
    margin: auto;
}
.ltr{
  direction : ltr;
}
.rtl{
  direction :  rtl;
}
</style>
<body>
  <ul class="ltr" lang="en">
    <li>English</li>
    <li   lang="ar">العربية</li>
    <li>English</li>
  </ul>
  <ul class="rtl"  lang="ar">
    <li>العربية</li>
    <li  lang="en">English</li>
    <li>العربية</li>
  </ul>
</body>

</html>

Answer 2

This code is functioning flawlessly. Achieve the desired result by simply implementing some CSS:

<!DOCTYPE HTML>
<html>
<style type="text/css>
  ul {
    direction: rtl;
    max-width: 15em;
    margin: auto;
}
.ltr{
  direction : ltr;
}
.rtl{
  direction :  rtl;
}
</style>
<body>
  <ul class="ltr" lang="en">
    <li>English</li>
    <li   lang="ar">العربية</li>
    <li>English</li>
  </ul>
  <ul class="rtl"  lang="ar">
    <li>العربية</li>
    <li  lang="en">English</li>
    <li>العربية</li>
  </ul>
</body>

</html>

Answer 3

Answer №2

"Do you ever wonder why the list indicators end up so far in the margin when reversed?"

The reason for this is that a max-width:15em has been applied to the ul. As a result, the child list items will expand to the full width of the parent element, causing them to be positioned in this way.

"Is there a way to use dir tags on <li> elements without affecting the list indicators?"

Solution 1:

If you don't mind the irregular alignment of list indicators and want them to follow the direction, you can make the ul an inline element without specifying a specific width.

body {
  margin: 50px;
}

ul {
  display: inline-block;
  max-width: 15em;
  margin: auto;
}

Solution 2:

Another option is to use the list-style-position: inside property in the ul, which will align the bullets with the text.

ul {
  max-width: 15em;
  margin: auto;
  list-style-position: inside;
}

Answer 4

"Do you ever wonder why the list indicators end up so far in the margin when reversed?"

The reason for this is that a max-width:15em has been applied to the ul. As a result, the child list items will expand to the full width of the parent element, causing them to be positioned in this way.

"Is there a way to use dir tags on <li> elements without affecting the list indicators?"

Solution 1:

If you don't mind the irregular alignment of list indicators and want them to follow the direction, you can make the ul an inline element without specifying a specific width.

body {
  margin: 50px;
}

ul {
  display: inline-block;
  max-width: 15em;
  margin: auto;
}

Solution 2:

Another option is to use the list-style-position: inside property in the ul, which will align the bullets with the text.

ul {
  max-width: 15em;
  margin: auto;
  list-style-position: inside;
}

Using the <li dir="..."> tag can cause list indicators to break

Answer №1

Answer №2

Similar questions

Transferring data from the Server-Side dataTable to a modal | Creating a personalized row button for dataTable

Can the text within the <h3> element be displayed on top of the inline image without the use of <span> tags or background images?

Guide on how to forward the response obtained from an Ajax call to a different HTML page

Display a new view upon clicking a button using AngularJS in a single-page web application

Reset the input field upon button press

Ways to implement the CSS on images with an ID such as img120 within a div that has a class of 'open'

Displaying Data in Table Using Ajax Request

Increase the gap between columns in Bootstrap for a better layout

Employing a Button with PHP

Is it advisable to incorporate multiple images onto a single canvas?

Using JavaScript and jQuery to create a delay when handling input events

How to easily center text across multiple lines using CSS

Selecting properties from a GeoJSON object on the fly with Leaflet

Differentiating onClick events for parent and child elements

"Encountering an issue when linking the file with phpMyAdmin

There seems to be an issue with the Angular QuickStart project as it is not functioning properly, showing the error message "(

Using Python and Django to Populate Form Fields in a Model with values from an Imported JSON dataset

What could be the reason why certain animations fail to run on specific icons when hovering over the parent element?

Discrepancy in CSS rendering in Chrome and Firefox

Enable landscape mode exclusively for tablet and mobile devices, excluding desktop users