Home / Questions / 475551
Accepted
ArcanisGK507
Asked: 2022-08-08 07:28:27 +0800 CST 2022-08-08 07:28:27 +0800 CST

I can't get the right fonts or the right css setting for text alignment between arabic and standard characters

  • 772

As you will see in the images, the system detects that these two stringhave 4 characters UTF-8, it is a view html, bone that is accessible from the browser:

//1234
//عباس

enter image description here

but when placing them one below the other they are not aligned, in the text with Arabic characters there is a loss of pixel space which I attribute to the fonts.

I implement normalizeversion 8.0.1for the css reset.

I have tried to use these fonts: consola, monospaceand jetbrain monowithout any positive result.

I have investigated what font can display this correctly aligned and I find that when entering the browser console it looks like this, almost perfectly aligned but with a minimum increase in pixels:

enter image description here

I tried to investigate what Font and setting it uses devtoolsbut google chrome browserI found absolutely nothing in the documentation, I just need how they apply the font of the html code viewer and what font they use.

Try to validate what it looks like in my IDE I use PHPStorm and guess what it looks like:

enter image description here

perfectly aligned; I validate the font and settingof my IDE and they are these:

enter image description here

I implement the same in my 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>

and on the website it continues to display badly:

enter image description here

I can't find what I'm doing wrong?

This is what comes out in the google chrome CSS viewer:

enter image description here

update

and this is what happens when you have data in different languages: view on website

enter image description here

html

1 Answers

  1. Best Answer

    Doing tests I have seen that the Courier source achieves a result, if not exact, at least quite close to what you need.

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

    • 3