Geek asks and answers

CSS: as a style at character’s height versus line height

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 only to the height of the letter compared to the height of the font / line? It actually ends up looking like this:

█▄██▄ ▄▄▄██

+5
source share
3 answers

( ). (, span), , CSS-. W3C , , . CSS3 ( ) , .

, , , JavaScript "" (, "w" ) "" " (," h ") " █ " . jsfiddle.

+2

CSS, PHP, imagefontheight: http://php.net/manual/en/function.imagefontheight.php ...

+1

, CSS, - :

  • html-.
  • .
  • (), , , , , .

: , , , .

Here's an example script with the word color on the left contrasting to see how the background matches the letters. Note: this will undoubtedly have some variations in height and spacing above / below the browser and font-based letters that you see. Using a pseudo-element :beforeto achieve the effect means what needs to be done for older browsers (IE7 and below).

Here is the main code in the fiddle.

<span>H</span><span class="short">e</span><span>l</span><span>l</span><span class="short">o</span><span class="short">w</span> <span class="short">w</span><span class="short">o</span><span class="short">r</span><span>l</span><span>d</span>

  span {
    color: white;
    display: inline-block;
    position: relative;
    height: 1em;
  }

  span:before {
    content: '';
    position: absolute;
    top: .2em;
    right: 0;
    bottom: .1em;
    left: 0;
    background-color: black;
    z-index: -1;
  }

  span.short:before {
    top: .4em;
  }
+1
source

More articles:


All Articles