Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Text-align: justify issue!

Hey, when i add text-align: justify to my paragraph, i get some wierd spacing between certain letters,

anyone have an idea what the problem is? (i use google chrome if thats causing the problem)

// erdrag

Johnatan Guzman
Johnatan Guzman
Courses Plus Student 2,360 Points
Johnatan Guzman
Johnatan Guzman
Courses Plus Student 2,360 Points

That is what justify does, adjust the spacing between letters so that they all wrap at the same width, like u see in the newspapers

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

adjust the spacing with letter-spacing?

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points

As Johnatan Guzman pointed out, text-align: justify is used so that each line of text in an element (such as a paragraph) has the exact same width as every other line. How justify does this is by affecting the spacing in between words so that no word ever wraps to another line. It calculates how wide the block of text will be and then affects the spacing in between words accordingly. You will get some very weird results in the sentences you use by using the text-align: justify declaration, but the result can be a cleaner block of text than using left, right, or center alignments.

Check out this Codepen I just created which illustrates justify, left, right, and center alignment, respectively: Justified, Left, Right, and Centered Example.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

okey, but letter spacing will fix the problem right?

// erdrag

Marcus Parsons
Marcus Parsons
15,719 Points

letter-spacing affects the spaces in between letters, but what justify does is affect the spacing in between words or word-spacing; however, adding a word-spacing declaration with a positive pixel value to the CSS will only add whatever you declare the word-spacing to be. You will get even further weird results by adding word-spacing, but if you declare some negative word-spacing it can make the text look more presentable. Let's say I changed the CSS selector for justify like so:

#justify-aligned {
  text-align: justify;
  width: 300px;
  word-spacing: -2px;
}

The word spacing will be much better, and you will still get that justified block of text look. You'll have to play around with the values to get it where you like, but I quite like the "-2px" word-spacing.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

do i have to give my paragraph a specific width as you did?

btw the spacing beteen the words only occurs when i rezise the browser to smaller,

Marcus Parsons
Marcus Parsons
15,719 Points

I just gave it a specified width so that you can see how justify works. But, most of the time, web developers do not allow a paragraph to span the entire width of the page because there will be extra content, and it makes the paragraph much harder to follow along. Paragraphs with shorter lines are far more readable than long stretching paragraphs.

The browser will only apply the word spacing from the justify alignment when there are more sentences than one full line, as you found out when you re-adjusted the browser window. If I would have added more content to the paragraph such that the paragraph spanned 2 lines or more and taken out the width property, you would see some word spacing come in to play.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

how would you fix the word spacing issue when rezising browser?

Marcus Parsons
Marcus Parsons
15,719 Points

You could probably do some calculations to test word lengths across the width of a sentence at any given point and adjust word-spacing accordingly using JavaScript.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Havent learned about javascript yet, but thanks, im gonna test my way forward, and see if it works out

// erdrag

Marcus Parsons
Marcus Parsons
15,719 Points

Awesome, erdrag! Good luck with your future endeavors. If my answer helped you out the most, I'd appreciate being selected as best answer so that we can close this question. :)