CODEWITHSUNDEEP
htmlunicodefonts
Andrej
Andrej

Reputation: 1736

Make every Unicode character on a web page the same width

I need two following Unicode characters to have the same width in a web page: ▼ (▼) and ▶ (▶)

font-family: monospace; does not help, they still get different width (Windows 8, Firefox 17):

Screenshot showing monospace problem

Is there any way to let every (and not only usual letters) character on a page to have the same width?

Source code of the example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>7
  <body>
    <h1 style="font-family: monospace;">
      &#9660;test 
      <br>
      &#9654;test
    </h1>
  </body>
</html>

Upvotes: 2

Views: 3314

Answers (1)

Jonathan
Jonathan

Reputation: 6732

Put both characters in another tag (like <span>) and give it a fixed width using CSS. Like this (working example):

<span style="display: inline-block; width: 30px;">&#9660;</span>test 
<br>
<span style="display: inline-block; width: 30px;">&#9654;</span>test

Or choose a CSS only approach which I assume would be more decent (working example):

<span class="opened">test</span>
<br>
<span class="closed">test</span>

And the CSS code:

.opened::before {
    display: inline-block;
    content: "▼";
    width: 30px;
}

.closed::before {
    display: inline-block;
    content: "▶";
    width: 30px;
}

Upvotes: 4

Related Questions