3 replies [Last post]
dekadem
Offline
newbie
Last seen: 16 years 25 weeks ago
Joined: 2004-08-02
Posts: 6
Points: 0

Hi all! I'm wondering is there a way in CSS to align text unjustified (not sure if that's the right word). Meaning that margin on each line is different, accompaning eg. with an image. I'll put an example here using just space to give you some idea, what I'm meaning:

Duis autem vel eum iriure dolor
  in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore
       eu feugiat nulla facilisis at vero eros et
          accumsan et iusto odio dignissim qui blandit
           praesent luptatum zzril delenit augue duis dolore
            te feugait nulla facilisi. Lorem ipsum dolor sit
             amet, consectetuer adipiscing elit, sed diam nonummy
              nibh euismod tincidunt ut laoreet dolore magna aliquam
               rat volutpat.

Any ideas how should I do this without using any extra-spaces?

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 16 years 36 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

Unjustified paragraph?

well I think you are looking for:

http://www.meyerweb.com/eric/css/edge/raggedfloat/demo.html

Although I have recently done an example that is far more efficient on load time, but have not written it up as a tutorial or anything (coming soon). You can see my version:

http://www.caffeinefuelled.net/richard-hotlink/tests/slanty/chef5.htm

Feel free to take apart my code, the method is similar, but approaching from a slightly different angle and only using one image.

//edit, as a side not/disclaimer type thing, I only tested in a couple of browsers FF & IE6/win, although I don't think there is anything that might throw an error.

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 44 weeks 4 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Unjustified paragraph?

A much easier way is just to use the <pre> tag, just remember to specify the font and such in the css so it maches the rest of the site -

pre {font: blah; font-size: blah; etc }

then

<pre>

pie
line 2
line 3
etc
and so on
</pre>

Verschwindende wrote:
  • CSS doesn't make pies

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 16 years 36 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

Unjustified paragraph?

thepineapplehead wrote:
A much easier way is just to use the <pre> tag

You can do that, but think about the following:
1) if you want to re-write the paragraph, you have to manually reformat, which effectively rules out dynamic content
2) Try text zooming a pre tag Shock
3) If you have the same graphic on every page, as part of your layout, then every page has to be reformatted individually in the html.

Both methods will work and both have their advantages, but if you are going to use the pre tags, you might be better off using a p, and restyle the whitespace, for the sake of semanticity.

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P