CODEWITHSUNDEEP
csscenteringtypography
Clément
Clément

Reputation: 12937

How do I center a character in a box using CSS?

In other words, how do I ignore a character's depth and ascent in instead center it vertically in a surrounding box based just on its bounding box?

Here is a minimal html example:

.box {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  border: 1px solid black;
  text-align: center;
}
<span class="box">?</span>
<span class="box">,</span>
<span class="box">`</span>

It produces the following:

non-centered characters

How do I change it to produce the following instead?

centered characters

CSS solutions are preferred if they exist, but Javascript is acceptable as a last resort. I'm looking for a general solution, not just for the three characters pictured. There will be many such boxes in my page, so performance (if Javascript is used) is important.

To clarify things even further, here is how I would do this in LaTeX:

\newlength{\desiredboxsize}
\setlength{\desiredboxsize}{1em}
\newcommand*{\centercharinbox}[1]{%
  % Force width
  \makebox[\desiredboxsize]{%
    % Force height and center vertically
    \raisebox{\dimexpr .5\desiredboxsize - .5\height \relax}[\desiredboxsize][0pt]{%
      % Cancel depth
      \raisebox{\depth}{#1}}}}

Upvotes: 10

Views: 803

Answers (2)

c-smile
c-smile

Reputation: 27470

You cannot do that with modern CSS. Neither can you do that out of the box with JavaScript in browsers.

Essentially: you need to get glyph outlines as paths from fonts. Using that information you can get path outline box and render / align in the way you need.

For getting glyph outlines check this How do I get glyph outlines of a letter as bézier paths using JavaScript? answer for example.

Having glyph outline paths you can render them into <canvas> elements.

Upvotes: 3

Garifullin the Russian
Garifullin the Russian

Reputation: 99

In theory, you can do it by aligning every symbol individually.

Practically, you can't as every symbol has its own depth and ascent in the character map, especially using only CSS.

Upvotes: 7

Related Questions