(Edit: I only need this for the 10 digits 0..9, can I hardcode the letter width for each one of the 10 digits in the CSS file?)
I have read CSS - Make sans-serif font imitate monospace font but the CSS rule letter-spacing doesn't seem to be enough:
How to imitate a monospace fixed font from a standard sans-serif font?
This doesn't work perfectly:
.text {
font-family: sans-serif;
letter-spacing: 10px;
}<div class="text">
ABCDEFGHIJKLMNOPQR<br>
STUVWXYZ0123456789
</div>
On
I've spent too much time trying to find a good monospaced font that works with several alphabets and had the look I wanted. These are the solutions I found (in order of recommendation):
letter-spacing to simulate a simple monospaced font.
On
A very hacky solution. I repeat, a very hacky solution.
You can extend the text-shadow declaration to account for more letters if you want. You only need to manually adjust the variable --h based on your font. Don't rely on default fonts because it won't work across browsers.
The below works fine for me on Chrome Linux (and will break elsewhere)
.text {
--w: 1.3em; /* control the width */
--h: 17px; /* the height (adjust for your particular case) */
font-family: sans-serif;
writing-mode: vertical-lr;
text-orientation: upright;
height: var(--h);
width: calc(14*var(--w)); /* 14 = number of shadows + 1 */
overflow: hidden;
text-shadow:
calc(1*var(--w)) calc(-1*var(--h)),
calc(2*var(--w)) calc(-2*var(--h)),
calc(3*var(--w)) calc(-3*var(--h)),
calc(4*var(--w)) calc(-4*var(--h)),
calc(5*var(--w)) calc(-5*var(--h)),
calc(6*var(--w)) calc(-6*var(--h)),
calc(7*var(--w)) calc(-7*var(--h)),
calc(8*var(--w)) calc(-8*var(--h)),
calc(9*var(--w)) calc(-9*var(--h)),
calc(10*var(--w)) calc(-10*var(--h)),
calc(11*var(--w)) calc(-11*var(--h)),
calc(12*var(--w)) calc(-12*var(--h)),
calc(13*var(--w)) calc(-13*var(--h))
}<div class="text">ABCDEFGHIJKLMNOPQR</div>
<div class="text">STUVWXYZ0123456789</div>this works as a workaround to using spans it uses the css ruby display type.
it does the job by seperating each letter with a space
also works best if each line is of same length i included a script that ensures this
a bit late i know but i hope it helps!
const doitElements = document.querySelectorAll(".doit");
// 2. Iterate through each element
doitElements.forEach(element => {
let content = element.textContent;
// 3. Split the content into lines
const lines = content.split('\n');
// 4. Process each line
const modifiedLines = lines.map(line => {
// Space out individual letters
return line.split('').join(' ');
});
// 5. Find the line with the maximum length
let maxLength = 0;
modifiedLines.forEach(line => {
maxLength = Math.max(maxLength, line.length);
});
// 6. Pad shorter lines with spaces
const paddedLines = modifiedLines.map(line => {
let difference = maxLength - line.length;
if (difference == maxLength || difference == 0)
return line;
difference = difference / 2 - 1;
// debugger;
return line + ' ⠀'.repeat(difference);
});
// 7. Construct the new HTML content
const newContent = paddedLines.join('<br>');
// 8. Update the original element's HTML
element.innerHTML = newContent;
}); div {
font-family: Arial, Helvetica, sans-serif; /* Your desired
font */
display: ruby;/* the code that makes it work*/
letter-spacing: 0.2em; /* Adjust this value */
word-spacing: -0.4em; /* Adjust this value */
} <h4> when text has different length does not work perfectly</h4>
<div class="doit">
ABCDEFGHIJKLMNOPQRasdasd<br>
STUVWXYZ0123456789
</div>
<h4>when it has the same length it works kinda</h4>
<div class="doit">ABCDEFGHIJKLMNOPQR<br>
STUVWXYZ0123456789</div>
<h4>or when adding spaces manually also kinda works</h4>
<div class="without_js">A B C D E F G H I J K L M N O P Q R<br>S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9</div>Disclaimer: this only ensures that the text has the same length visually linke in Word or any writing program the Block type text formatting does this results in the text not lining up perfectly in the middle so the initial problem perseveres.
Another better solution is this:
const doitElements = document.querySelectorAll(".doit rb");
// 2. Iterate through each element
doitElements.forEach(element => {
let content = element.textContent;
// 3. Split the content into lines
const lines = content.split('\n');
// 4. Process each line
const modifiedLines = lines.map(line => {
// Space out individual letters
return line.split('').join(' ');
});
// 5. Find the line with the maximum length
let maxLength = 0;
modifiedLines.forEach(line => {
maxLength = Math.max(maxLength, line.length);
});
// 6. Pad shorter lines with spaces
const paddedLines = modifiedLines.map(line => {
let difference = maxLength - line.length;
if (difference == maxLength || difference == 0)
return line;
difference = difference / 2 - 1;
// debugger;
return line + ' ⠀'.repeat(difference);
});
// 7. Construct the new HTML content
const newContent = paddedLines.join('</rb><br><rb>');
// 8. Update the original element's HTML
element.innerHTML = newContent;
});ruby {
font:1em;
font-family: Arial, Helvetica, sans-serif;
ruby-position:border;
display:ruby-text;
width: 261px;
word-spacing: 0em;
}
.doit,.second {
width: 215px !important;
}<h3>solution pure css</h3>
<ruby>
<rb>T h i s i s a l o n g t e x t t o c h e c k</rb><br>
<rb>T h i s i s a 8 8 8 8 t e x t t o c h e c k</rb>
</ruby>
<h3>Letters spaced with js:</h3>
<ruby class="doit">
<rb>
ABcdeFGhijklMNop<br>
QrstuVWXyZ123973
</rb>
</ruby>
<ruby class= "second">
<rb>A B c d e F G h i j k l M N o p</rb><br>
<rb>Q r s t u V W X y Z 1 2 3 9 7 3</rb>
</ruby>But still overall it would be best to choose a monospace font from a site like google fonts
tbh there is no merit in seeking another solution other than a monospace font, as eediting a font to be monospace is also possible
(look at the free tool glyphr studio there it has an option to convert any imported font to monospace)(picture: )
TL;DR: imitating monospace fonts always introduces issues
font-variant-numeric: tabular-numsif you only need to get tabular numbersAll these hacks are actually way more expensive and "wobbly" with regards to a predictable cross-browser rendering. However let's summarize these hacks:
Hack 1: Wrap all characters in inline-block elements
Apart from changing the actual font metrics in a font editor and compiling a new font you could split up all letters into an array of
<span>elements via javaScript.Each character will be wrapped in a span with an
inline-blockdisplay property.Besides all characters are centered via
text-align:center.The above script will also compare the widths of all characters to set the largest width as the span width.
Admittedly, this is not very handy
but this approach might suffice for design/layout purposes and won't change the actual font files.
As illustrated in the snippet:
In monospace fonts the widest letters like "W" are desined in a kind of squeezed manner (not distorted) whereas the thinner ones like "i" are designed visually stretched (e.g by adding bottom serifs).
So proper monospace fonts can't really be emulated.
Hack 2: Substitute only digits
Quite a few web fonts also include tabular numerals which can be applied via CSS property
font-variant-numeric: tabular-nums.Apply additional font only to numbers
We can specify a unicode-range in the
@font-facerule to apply a font only to numbersHack 3: (very experimental!)
text-transform: full-widthThis property normalizes rendered character-widths to a uniform value. This feature is currently only supported by Firefox.
Why
letter-spacingdoesn't workletter-spacingjust evenly inserts whitespace between all letters (...hence the name).It won't normalize characters/glyphs to have the same widths.
We would need a css property like
letter-widthwhich doesn't exist.Most likely we'll never get a similar property as text nodes don't add selectable sub nodes for each character – this would be kind of an overkill.