fooman

# April 29, 2013 at 10:03 am

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

# April 29, 2013 at 10:05 am

>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

# April 29, 2013 at 10:19 am

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

# April 29, 2013 at 10:28 am

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

# April 29, 2013 at 10:53 am

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

# April 29, 2013 at 11:33 am

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

# April 29, 2013 at 1:17 pm

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

# April 29, 2013 at 1:50 pm

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

# April 29, 2013 at 2:06 pm

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

# April 29, 2013 at 2:16 pm

This reply has been reported for inappropriate content.

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

deeve007

# April 29, 2013 at 2:35 pm

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

# April 29, 2013 at 2:46 pm

This reply has been reported for inappropriate content.

.. indeed!

thx sir!

wolfcry911

# April 29, 2013 at 2:57 pm

perhaps this would work:

http://fittextjs.com/

deeve007

# April 29, 2013 at 4:06 pm

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

# October 14, 2013 at 1:21 pm

Fantastic tip Merri!