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>