9

I have need in a project to show rules at the baseline, x-height, and cap height of several font samples. I have baseline and x-height taken care of, but am having trouble getting a general CSS rule that will draw a border at the cap height of any font I apply the rule to. I've fiddled with the line height, but the space between a font's glyphs and the top of its layout box differs from font to font, so setting it once won't work for any font.

This Code Pen example illustrates the issue: http://codepen.io/DrSpatula/pen/BAgqG

3

3 Answers 3

1

You are now applying the line-height to the p. If you remove it there, and apply the line-height to the span.text, and set it to a value of 1.55ex, it shows properly.

So your CSS will be:

    p {
      font-size: 72px;
      position: relative;
      margin: 0;
      padding: 0;
    }

    p span {
      margin: 0;
      padding: 0;
      display: inline-block;
    }

    .sans {
      font-family: sans-serif;
    }

    .text { 
      border-top: 1px solid blue;
      line-height: 1.55ex;
    }

    .rule {
      height: 1ex;
      border-top: 1px dotted red;
      border-bottom: 1px solid blue;
      position: relative;
      left: -7.25em;
      width: 7.75em;
      top: 1px;
    }
0

It's very dirty, but have you tried a one pixel .gif as a repeating background then you can set it's position relative to the font?

0

maybe I can help. I've made a small fiddle for you to view. (http://jsfiddle.net/dgxJh/1/)

I fear however that with this solution you'll have to repostion the span with the pink line for every font-size and every font. But in essence you'll position a span over your text by using following code:

span{
    height: 1px;
    width: 100%;
    background: pink;    
    display: block;
    position: absolute;
    top: 0.6em;
}

don't forget to position your container relative

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.