Fully Justifying Text

[Fluffykins]

Hey y'all.

I've seen a few sites now that have paragraphs of text fully justified. I'm guessing this will be done using a CSS element, so what's the code I'd need to implement it?

Also, are the any compatibility issues I'd need to know before I started using it on a wide scale?

Ady

[creole]

<style type="text/css">
<!--

p { text-align: justify; }

-->
</style>

That's it. Works in IE 5.5 and NS 4.75 for the PC. I would guess that this attribute is supported in NS and IE forthe Mac too. it's a pretty simple one.

[Fluffykins]

Simple as that eh?

Well if you don't ask you'll never know

Ady

[creole]

its even simpler than that...

oh wait...

[lynlimz]

haah...actually...
if you guys are really interested in css, you outa print out the css definition list at w3....very helpful...read it a few times and poof..its all within you. =)

http://www.w3.org/Style/CSS/

[Fletch]

Hi,

Just a quick word of warning. Justifying text makes it a lot harder to read onscreen. I can't remember where I read it, but there was a good article somewhere on making text as easy as possible to read on the web. I will have a look for it later. Since reading that article I have experimented myself and I think it is true oncreen although I don't think this is the case for printed material.

[mmj]

As far as easy to read goes (these are my opinions):

Justifying text is good when there is a really narrow column width, like in a printed newspaper or a navigation panel. Left-aligned text is good when the column width is wider, like in a novel or some content in your webpage.

Also, having a narrow font like Arial Narrow isn't good when the column of text is wide. Verdana is actually quite a wide font and thus is is quite suitable on the web when the column width is wide. If there are more than about 15 words on each line, I recommend a wide font like verdana and left-aligned text. You can also increase the line spacing a bit if you really wanted to make it more readable.

===
Also, I'd like to mention my dislike of Jakob Neilson's website:
www.useit.com : Jakob Nielsen's Website

The text is seriffed, and stretched across half of the screen. Columns are really wide and yet the line spacing is quite tight. I think it is really hard to read.

I think a sans-serif font, and a bit of an increase in line spacing would improve it. If the column widths were slightly more narrow it may improve it too.

Also, a brandable logo or box up the top would improve its look. I know he is against graphics, but he could at least do a little red box with a text heading or something!

That's what I think. Anyone else with opinions?

[lynlimz]

Originally posted by mmj
Also, I'd like to mention my dislike of Jakob Neilson's website:
www.useit.com : Jakob Nielsen's Website

The text is seriffed, and stretched across half of the screen. Columns are really wide and yet the line spacing is quite tight. I think it is really hard to read.

I think a sans-serif font, and a bit of an increase in line spacing would improve it. If the column widths were slightly more narrow it may improve it too.

Also, a brandable logo or box up the top would improve its look. I know he is against graphics, but he could at least do a little red box with a text heading or something!

That's what I think. Anyone else with opinions?

haaha..i think there's too much text..and ince I'm using 1024 by 768 res....how about those that are lower? goosh!
of coz, graphics would do good...

[trying to prevent the post from straying to a site review...]

[freakysid]

Originally posted by mmj

Also, I'd like to mention my dislike of Jakob Neilson's website:
www.useit.com

tro11

For a minute there I thought I was in the website reviews forum and that maybe Jackob Neilson had posted asking for a usability review of his site.

[lynlimz]

Originally posted by freakysid

For a minute there I thought I was in the website reviews forum and that maybe Jackob Neilson had posted asking for a usability review of his site.

LOL freakysid!

[hmahonen]

Originally posted by mmj
The text is seriffed, and stretched across half of the screen. Columns are really wide and yet the line spacing is quite tight. I think it is really hard to read.

I think it's very easy to read I can read it with a line width I want.

Also, a brandable logo or box up the top would improve its look. I know he is against graphics, but he could at least do a little red box with a text heading or something!

http://www.useit.com/about/nographics.html

That's what I think. Anyone else with opinions?

Let's NOT start discussing about Nielsens website again, there have been several threads before about the subject.

[lynlimz]

btw..why is the property known as justify?
hmm....

[creole]

you'd have to go back over a hundred years to ask that question. Justify comes from the old days when they laid out lead type in a printing press.

For example, today they call it leading (the space between lines of type) because back then they actually used thin strips of lead to put the space between lines.

[lynlimz]

wow..cool....thats nice....thanks creole!

[sowen]

Justify ~ to adjust the spaces between words in a line of type so that it is the required length to fit exactly.

When you see neat clean looking columns of text in the broadsheets it has taken a combination of skilled copywriters, skilled editors and skilled typesetters to produce the look. Correct justification requires skill patience and ABSOLUTE control over the width of your column.

In short, don't justify a liquid column and if you justify a fixed column you may have to spend time re-writing your copy to ensure it looks good.

Check this out - White Space

[lynlimz]

Originally posted by sowen
Check this out - White Space

excellent link sowen..thanks!

[mmj]

Originally posted by lynlimz

trying to prevent the post from ...

Originally posted by freakysid

For a minute there ...

LOL freakysid!

Point taken. Sorry all.

Sowen's example is good. I haven't really noticed many full justified blocks of text on the web.

[lynlimz]

lol mmj...no need for a sorry there. =)! you merely gave an example of justified text!

[Lightbulb]

No need for CSS
You can make text justified by

<P align="justify">Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah</p>

[sowen]

Just had to re-open this thread.

Here is an overwhelmingly good reason NOT to justify your text.

http://www1.fatbrain.com/catalogs/computing/home.asp

How ugly is that!!

[mmj]

hey sowen, I don't see anything ugly at that site... maybe they redesigned since you visited last?


There's a broken link there, which would indicate that they are still fixing up thier new design...