[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?

[fooman]

This reply has been reported for inappropriate content.

It’s more like a title rather than a section of text.
It’s actually a narrow area with often one or two words in big bold letters.
So it’s not a terrible design flaw or anything. Looks good, just dunno how to reliably do this in CSS other than using magic numbers.

[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.

[fooman]

This reply has been reported for inappropriate content.

Thanks for the reply!
That would only work if it was a really narrow box and was multiple words. It kinda treats the text as blocks rather than treating letters as blocks… if that makes any sense.

Awesome idea, but wouldn’t be a good solution for this particular weird scenario. I think I literally have to rely on a ‘magic number’ solution for this problem.

The best I can illustrate this problem is here:
Codepen

[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.

[fooman]

This reply has been reported for inappropriate content.

Generally curious, would you prefer using a “magic number” or the extra jquery script to do this?

Thx for posting this. I didn’t consider doing it this way!

[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.

[deeve007]

This reply has been reported for inappropriate content.

1) I woudn’t advise this within any design, it would mean different font leading/spacing/sizes or some combination thereof to make work technically, and there’s nothing worse than inconsistent font styles across a site.

2) No real way to do this reliably apart from images.

My advice would be a slight redesign.

[fooman]

This reply has been reported for inappropriate content.

how do you bring this up to a designer without starting WW3? haha ;)

[deeve007]

This reply has been reported for inappropriate content.

Has the designer created a series of mockups with different text & text lengths in the headings? If so, ask him if he’s comfortable with the leading/spacing/font size being different? If he is then I wouldn’t rate him as a designer.

But then if that fails, explain that it’s not technically possible without using images, which means they would need to be created manually, and the code added manually, each and every time.

[fooman]

This reply has been reported for inappropriate content.

.. indeed!

thx sir!

[wolfcry911]

perhaps this would work:

http://fittextjs.com/

[deeve007]

This reply has been reported for inappropriate content.

That would change the font size… seriously, shoot me if a designer wants the heading font to change font size from page to page on the same device/screen width…

[noahblon]

Fantastic tip Merri!

[Author]

Posts