How I can align a text/pargaph both to left and right in HTML? Like in the office programs.
+7
A:
text-align: justify; in css
but beware: unlike in proffesional DTP applications or even in word, HTML/browser often do not play nicely with this - you might end having humongous gaps in your text, completely destroying any typogtaphy you try to achieve in your document.
Edit:
As reply to Brian, my experiences are following:
- haven't tried
%for width, because I either set width inpxor not at all and letdisplay:block;element fill whole width of parent text-align: justifyworks best with smallfont-sizewith slightly higherline-height-line-heightis for readbility and smaller font size puts more characters in one line (abstract characters-per-line width), therefore gaps between words/justified text looks better- regarding images instead of small non changing parts of text - I tend to use as few image replacement parts as possible - I have very good results with
Cufón, if you learn to count with it's cons - I don't advice using justified text for sidebars and one-liners - it mostly seems ugly
Edit2:
The main problem is, that browsers don't know how to part your text (i.e. unbreakable to un-breakable) - soft hyphyen, ­ should solve this (link: soft hyphen overview), but browser support is wild at best :)
Adam Kiss
2010-02-25 14:57:44
In regards to the having humongous gaps in text, I have found that text-align: justify; works best when you have a set font size, and a set width. If it is a percentage width, that can lead to very unexpected results. Likewise, if the font is not specified in an exact pixel value but a relative value, similarly unexpected results for various browsers can be experienced. Another solution if there is just a small area of text that doesn't change is to use an image.
Brian
2010-02-25 15:03:05
@Brian My reply in answer, since it kind of touches the subject.
Adam Kiss
2010-02-25 15:17:44
@Brian: +1 And of course there is the non-breaking humongous word issue that throws this (and even right- or left-aligned text containers) into a turmoil. One tries to adhere to the "alphabet-and-a-half" (i.e., approx. 40 characters) line width, which is the goal for printed matter, but that can get really ugly on the Web.
Robusto
2010-02-25 15:21:29
@Adam +1 also. I hate to be a typography nerd, but I really wish more Web developers would pay attention to niceties of typography, or at least avoid the egregious errors like this one that are so often seen.
Robusto
2010-02-25 15:22:56
Adam Kiss
2010-02-25 15:32:19