My goal is to automatically align text based on the language, so that Arabic text starts from the right and English text starts from the left. After some online research, I discovered that I need to use dir="auto" in the tag and text-align: auto; in the CSS file. I tried implementing this with the h1 tag, but it didn't work with the a tag.
The 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;
The 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'm not sure what I'm missing here, or if it's because of using map! Any help would be greatly appreciated.