I'm learning HTML/CSS. I created a List that is justified to the right. In order to do this I created the following CSS code:

li {

    text-align: right;
    direction: rtl;


}

And the HTML does not have anything special:

<div >
<div class= "col-12" >
  <ul >
    <li>Corrientes Eddy (ECT)</li>
    <li>Corrientes Eddy Multi frecuencia para Intercambiadores de Calor (ECT)</li>
    <li>Ultrasonido Arreglo de Fases (PA)</li>
    <li>Ultrasonido Industrial (UT)</li>
    <li>Ultrasonido para Medición de Espesores (UTM)</li>
    <li>Inspección Visual (VT)</li>
    <li>Inspección Visual Remota (RVT)</li>
    <li>Líquidos Penetrantes (PT)</li>
    <li>Partículas Magnéticas (MT)</li>
    <li>Pruebas de Dureza (HT)</li>
    <li>Pruebas Hidrostáticas y Neumáticas (LT)</li>
    <li>Radiografía con Rayos X Industriales (RT)</li>
  </ul>
</div>

On a PC the list looks as it should, but on a phone, the last parenthesis becomes the first character, I'm not sure if this is a result of the direction parameter. Any ideas? I would greatly appreciate your help. Thanks in advance.

Something else to note: I have a second list with the same css but that one does not have parenthesis and it shows ok.

how it looks on a pc

how it looks on a mobile phone

Update: So far this is what I tried: I removed direction from the CSS and used dir in the HTML I removed my parenthesis and used these ﹙﹚, （ ）, ( ) I removed my parenthesis and used the opening and closing parenthesis code (( and )) I added a space with I changed the CSS from li and used it on ul I removed my UL tags from html I added a point and now the point shows as first character on both the PC and mobile (but on mobile it shows the point and the parenthesis)

I added a point

CodePudding user response：

Have you try styling on the <ul> instead of <li> ?

 ul {
    text-align: right;
    direction: rtl;
 }

CodePudding user response：

You are specifying direction right to left. Why?

See developer.mozilla.org/en-US/docs/Web/CSS/direction:

"Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages)."

For a right to left language the system has to look for paired characters - e.g. all the different bracket types - and make sure that any closing item of the pair comes to the left of its opening partner. Hence your bracket gets moved.

But you are using a left to right language. Normally no need to specify direction as it'll be the default.