Home/ Questions/Q 8992077
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T22:52:20+00:00

I need two following Unicode characters to have the same width in a web

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
}
    • 0