[Solved] One-line Justified Text Design

[fooman]

I’m doing a site and the design has a lot of one-line justified text sections. It’s kinda important to keep it this way I guess.

Just curious, is there a way to do this or fake it without using images?
Text-align: justify; doesn’t do anything with single-line sections.
Using pixel-values for font-size isn’t reliable from browser to browser.

Anyone have any guidance?

[Paulie_D]

>one-line justified text sections

Even if it’s just two words?

That sounds pretty awful.

>It’s kinda important to keep it this way I guess.

Is it…have you checked?

[Merri]

You can hack it like this:

h1 {
height: 1.5em;
line-height: 1.5em;
text-align: justify;
text-align-last: justify;
}

h1:after {
content: ”;
display: inline-block;
width: 100%;
}

I guess this is the easiest way to get the effect. Hard limits it to one line though. I don’t have time to verify how wide the browser support status is, but text-align-last is IE6+ I think. There are also other browser vendor specific properties, but I can’t recall those from the top of my head. Mobile web limits my search-ability right now.

[Merri]

Ah, that way. No CSS way, but you can push some JavaScript to do it: http://codepen.io/Merri/pen/dquki

Someone else is probably able to shorten the jQuery code.

[Merri]

In this case magic numbers could be poison as not everyone may have the intended font. So I’d say do what you can with CSS (`text-align: center;`) and then throw JavaScript for those who support it (the vast majority).

Images could be other alternative that isn’t mentioned yet, but that would require more work. It is quite easy to give `width: 100%;` to images and have them scale. All the rest isn’t that easy.

[wolfcry911]

perhaps this would work:

http://fittextjs.com/

[noahblon]

Fantastic tip Merri!

[Author]

Posts