Unable to automatically align text

Question

I'm trying to automatically align the text so that when the text is in Arabic the text starts from the right and if the text is in English the text starts from the left. After searching the internet I found out that I have to use dir="auto" in the tags and text-align: auto; in the CSS file. I used the h1 tag but not the a tag.

Code:

import "./item.css";

const Item = ({ Links, title }) => {
  return (
    <ul>
      <h1 dir="auto" className="itemTitle">{title}</h1>
      {Links.map((link) => (
        <li key={link.name}>
          <a dir="auto" className="itemLinks"
            href={link.link}>
            {link.name}
          </a>
        </li>
      ))}
    </ul>
  );
};

export default Item;

CSS file:

.itemTitle{
    margin-bottom: 1px;
    font-family: 'Tajawal', sans-serif;
    text-align: auto;
    font-size: 15px;
    font-weight: 700;
    color: gray;
}

.itemLinks{
    color: gray;
    font-family: 'Tajawal', sans-serif;
    text-align: auto;
    font-weight: 500;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px; 
}

I don't know what I'm missing here or it just doesn't work because I'm using a map! Some help would be greatly appreciated.

Answer 1

If you provide a <div dir="auto"> wrapper, everything inside it will have auto text direction:

const Item = ({ Links, title }) => {
  return (
    

      
{title}
      

        {Links.map((link) => (
          

            
              {link.name}
            
          
        ))}
      
    
  );
};

[dir="auto"] > * {
  text-align: auto
}

In your case, the closest flow content element given the text direction of the achor element would be <ul>.
This means that putting dir="auto" on <ul> will also work, you don't need a <div> wrapper. However, using a wrapper you don't have to specify it in two places.

Side note: As someone pointed out in the comments, the <h1> tag is an invalid subtag of the <ul> tag.