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>

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

"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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Query Selector(jQuery selector) is a powerful tool for

Here is the HTML Table structure: <table class="display" style="width: 1000px;" id="failoverServers"> <thead> <tr> <th class="row_selector_head"> <input type='checkbox' class='select_all_ch ...

WindiCSS classes are not functioning properly within a Nuxt application

I've been encountering some difficulties with WindiCSS. The classes are not being applied to the elements as expected. I attempted to install an older version of Windi, but the issue persisted. I even tried switching to Tailwind instead of Windi, but ...

Tips for showcasing a string value across various lines within a paragraph using the <br> tag for line breaks

I'm struggling to show a string in a paragraph that includes tags to create new lines. Unfortunately, all I see is the br tags instead of the desired line breaks. Here is my TypeScript method. viewEmailMessage(messageId: number): void { c ...

Transitioning a user interface from Excel to ASP.NET

Currently, we have an Excel spreadsheet that is utilized for data collection from users and to populate our database. Now, the need arises to develop an asp.net page to gather this data instead. We are facing some challenges in determining the most effect ...

Tips for including a decimal point in an angular reactive form control when the initial value is 1 or higher

I am trying to input a decimal number with 1 and one zero like 1.0 <input type="number" formControlName="global_velocity_weight" /> this.form = this.fb.group({ global_velocity_weight: new FormControl(1.0, { validators: [Valida ...

What is the best way to ensure that all of my images are the same size?

I've been working on making my pictures of varying resolutions the same size here, but no matter what I try, it just doesn't seem to work. Here is what I'm getting: . When I change the state to 1, 2, 3, or 4, I want it to look like this: her ...

Cleaning up extra spacing following the implementation of the "top" tag in CSS

I've been working on a project for this site and I've encountered a small issue. Despite my efforts, I can't seem to resolve it :/ There's an unwanted whitespace at the bottom of my webpage, in the footer section. I've attempted ...

switch from material ui lists on/off

Trying to learn React through coding, I've encountered an issue with displaying the 'StarBorder' icon next to folders when clicked. Currently, clicking on any folder displays the 'StarBorder' icon for all folders. Any tips on how t ...

Utilizing jQuery to apply a class to an element and modify the CSS parameters with custom values simultaneously

Unsure if this idea is feasible, but I'll attempt to explain my requirements. I am interested in accomplishing something like the following: A CSS class with variables X, Y, and Z left undefined: .r {border-radius:Xpx;-webkit-border-radius:Ypx;-moz ...

Error: Uncaught TypeError - The function indexOf is not defined for e.target.className at the mouseup event in HTMLDocument (translator.js:433) within the angular

Upon clicking on an SVG to edit my data in a modal bootstrap, I encountered the following error: Uncaught TypeError: e.target.className.indexOf is not a function at HTMLDocument.mouseup (translator.js:433) This is my SVG code: <svg data-dismiss ...

The CSS Grid does not align properly in the horizontal direction when displayed on mobile devices

I am currently working on a responsive layout where the header and footer should each take up around 5% of the screen space and remain fixed. The middle section should scroll based on the number of elements within it. Despite using the fr and % values, the ...

What is the most effective method for integrating a hosted React application into a website that is not built using React?

I currently have a complete React application hosted on AWS that I want to embed into another non-React site. Right now, I have it embedded using an iframe and it's working well. <!doctype html> <html lang="en> <head> <meta c ...

Angular JS is encountering an issue where the promise object is failing to render correctly

I'm currently learning Angular and I have a question about fetching custom errors from a promise object in Angular JS. I can't seem to display the custom error message on my HTML page. What am I missing? Below is my HTML file - <!DOCTYPE htm ...

Having trouble making class changes with ng-class

I am attempting to change the direction of the arrow in my checkbox by utilizing two classes with the assistance of ng-class. Unfortunately, it is not producing the desired outcome. Below is my code: Note: The angularJS CDN has already been incorporated. ...

What is the best way to align two navbar elements to the right in Bootstrap 5?

I've been attempting to position two elements at the end of the Bootstrap 5 navbar, but I haven't been successful. I've experimented with using ms-auto within a div that wraps around the login and sign up elements, but that hasn't work ...

Issue with the react-native-autocomplete-input where the list does not close after selecting an option

After selecting an item from the list in my react-native-autocomplete-input, the list does not close. let Location = (props) => ( <View style={styles.formItem}> <Autocomplete data={props.autocompleteResults.predictions} de ...

Is there a way to specifically dictate the order in which flexbox items expand or contract?

I am facing an issue with my flex container setup involving three children elements. I have specified both minimum and maximum widths for each child, but I want them to grow or shrink in a specific order as the window width changes. Ideally, Item1 should s ...

Positioning the .aspx buttons in a coordinated manner

In my update panel, I have a label, a dropDownList, and two buttons: <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div id="dropDownList" style="position:relative;" runat=" ...

Having trouble retrieving the value of a textarea within a jQuery UI dialog box

I attempted to place a textarea within a dialog box, with the intention of retrieving the value of that textarea when the "ok" button is clicked. However, I am encountering difficulties in retrieving the value. What could possibly be causing this issue? ...

How can I successfully transfer all user information when the edit button is clicked?

A new display page has been developed using php to show all user records in a table. The page includes delete and edit buttons for managing users. While the delete option is working fine, there is an issue with getting the edit button to function correctly ...