Essentially, how can I vertically center a character within a box based solely on its bounding box dimensions, disregarding its depth and ascent?
Here is a simple 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>This code snippet generates the following output:
https://i.sstatic.net/5ZqAS.png
Is there a way to modify it in order to achieve this output instead?
https://i.sstatic.net/z2axa.png
If possible, CSS solutions are preferred over Javascript. However, JavaScript is acceptable as a last resort. The objective is to find a solution that works universally, not just for the depicted characters. Given that there will be multiple boxes on my webpage, performance (especially if using JavaScript) is crucial.
To provide further clarification, here's how I would tackle this problem in LaTeX:
\newlength{\desiredboxsize}
\setlength{\desiredboxsize}{1em}
\newcommand*{\centercharinbox}[1]{%
% Force width
\makebox[\desiredboxsize]{%
% Force height and vertically center
\raisebox{\dimexpr .5\desiredboxsize - .5\height \relax}[\desiredboxsize][0pt]{%
% Cancel depth
\raisebox{\depth}{#1}}}}