3

Como verán en las imagenes, el sistema detecta que estos dos string tienen 4 caracteres UTF-8, es una vista html, ósea que es accesible desde el navegador:

//1234
//عباس

introducir la descripción de la imagen aquí

pero al colocarlos uno debajo del otro no se alinean, en el texto con caracteres arábigo hay una perdida de espacio pixeles el cual atribuyo al fonts.

implemento normalize version 8.0.1 para el reset del css.

he intentado utilizar estos fonts: consola, monospace y jetbrain mono sin ningún resultado positivo.

he investigado que font puede mostrar esto correctamente alineado y me encuentro que al entrar a la consola del navegador se ve de la siguiente forma, casi perfectamente alineado pero con un incremento mínimo de pixeles:

introducir la descripción de la imagen aquí

Intente investigar que Font y setting usa devtools de google chrome browser pero no encontré absolutamente nada en la documentación, solo necesito como aplican el font del visor de código html y que font usan.

Intente validar como se ve en mi IDE uso PHPStorm y adivinen como se ve:

introducir la descripción de la imagen aquí

perfectamente alineados; valido el font y setting de mi IDE y son estos:

introducir la descripción de la imagen aquí

Implemento los mismo en mi HTML:

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Code">
            <style>
                body, span {
                    font-family: "Fira Code", monospace !important;
                    line-height: 1.2;
                    font-size: 12px;
                }
            </style>
        </head>

y en el sitio web se sigue visualizando mal:

introducir la descripción de la imagen aquí

No encuentro que estoy haciendo mal?

Esto es lo que sale en el visor de CSS de google chrome:

introducir la descripción de la imagen aquí

Update

y esto es lo que sucede cuando tienes datos en diferentes idiomas: vista en el sitio web

introducir la descripción de la imagen aquí

1 respuesta 1

2

Haciendo pruebas he visto que la fuente Courier consigue un resultado si no exacto, al menos bastante cercano a lo que necesitas.

p {
  font-family: Courier;
}
<p>ABCW</p>
<p>كرام</p>
<p>....</p>

6
  • ok Listo pero cual es la diferencia que provoca esto??? no se si este asociado a joint que hace el renderizado html entre caracteres arabigos... es posible evitarlo?
    – user46896
    el 7 ago. 2021 a las 16:14
  • No es posible evitarlo, si te fijas, lo que hace tu IDE para que los caracteres arábicos tengan el mismo tamaño es jugar con la separación entre letras. Habrá combinaciones de letras en las que se vea más el cartón y otras en las que el truco de más el pego.
    – phpMyGuel
    el 7 ago. 2021 a las 16:20
  • es posible en css forzar la separacion de caracteres por hay vi que esto en ingles se le llaman ligaturas...
    – user46896
    el 7 ago. 2021 a las 16:26
  • Con la propiedad letter-spacing podrías jugar con ello, pero ya estarías rompiendo la adaptación que la fuente Courier hace para que cada caracter ocupe el mismo ancho.
    – phpMyGuel
    el 7 ago. 2021 a las 16:31
  • eso seria para aplicarlo a las otras fuentes
    – user46896
    el 7 ago. 2021 a las 16:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.