Question

Bear with me here, but assuming this code:

<style>
  span {
    color: black;
    background-color: black;
  }
</style>
<span>Hello world</span>

Hello world

Gives a result that looks like this:

███████████

Is it possible to apply style to just the letter height, versus the font/line height? In effect ending up with something that looks like this:

█▄██▄ ▄▄▄██

Answer 1

No (not with a background color anyway). Background colors apply to the entire element (e.g., span element), which is essentially a box as determined by the CSS box model. The official recommendation from the W3C specifies that a background color will fill the content, padding, and border areas of the box model. The CSS3 background (candidate recommendation) offers a bit more power for you to control where background colors apply, but not much.

If you really want the effect you’ve just demonstrated in your question, I think a JavaScript function to convert “short” characters (e.g., “w”) to “▄” and “tall” characters (e.g., “h”) to “█” would work nicely. Here’s a demo on jsfiddle.