How to achieve this border on paragraphs?

[Oskar]

How would you put a 1px solid border on a paragraphs of variable (font)size, spanning all the width including spaces.

Example: http://s.rough.dk/DQdG

Scalable background-img?

[TheDoc]

That certainly would be tough. You’d probably have to go pixel-based font sizing and use a specific line-height that is equal to the height of your repeatable background.

[Mottie]

I don’t get the difficulty… all I see in that screen shot are caps with an underline. Wouldn’t just using text-decoration: underline; work? Am I missing something?

[TheDoc]

@Mottie – specifically for a design like that, not really. Because the line is a certain distance from the words, I’m not sure you can adjust the underline.

[jamygolden]

@Mottie yeah I was wondering the same thing at first, but I think the spacing between the line and the text is a ‘big thing’.

[jamygolden]

Check this out – not too tricky :p : http://jsfiddle.net/TFW2E/1/

Edit: It’s not perfect though.

Edit: http://jsfiddle.net/TFW2E/4/ Line-height sorts it out

[Mottie]

@jamy_za Nice work! And adding “padding-bottom” will adjust the distance.

http://jsfiddle.net/Mottie/TFW2E/5/

Edit: Oh and I did discover that the specs include a “text-underline-position” (ref), but it doesn’t seem to allow adjusting it by a pixel distance.

[Oskar]

Working with an extra span, line-height and padding-bottom seems to do the job.

@mottie, no – not necessarily a big thing, but you know… the details ;-)

Thanks all of you!

[Oskar]

Not entirely solved, I can’t seem to find a way to decrease the distance with negative padding, relative positioning and line-height. Increasing it works fine tho.

[Author]

Posts