Imagine we start with this HTML:
<h2>TITLE</h2>
Can CSS alone transform it into something like this:
<h2>T I T L E</h2>
The goal is to justify the letters within the title over a specified width without relying on server-side solutions before exploring CSS possibilities.
I've successfully justified individual letters using these CSS rules:
h2 {
text-align: justify;
width: 200px; // for example
}
h2:after {
content: "";
display: inline-block;
width: 100%;
}
I've considered text-replace
, but major browsers do not support it. So far, no other promising options have been found.
If CSS3 has solid support, it's acceptable, but JavaScript is not desired.
UPDATE
letter-spacing
isn't suitable because the adjustment must be dynamic and I wish to avoid constantly checking browser kerning implementations. Thank you to those who suggested it, as it slipped my mind when writing the question :)