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