Michel Plungjan
asked on
How to justify text
Hi, with the code below, can I justify (spread) the text in the first div so the "onl" sticks to the lonely "y" (I do NOT mean right-justify)
I tried
width:380px; text-align:justify; text-justify:newspaper;
but that did not do anything
<html>
<head>
<style>
div {font-family: arial; position: absolute;}
</style>
</head>
<body>
<div style="font-size: 15.96px; top: 433.164px; left: 541.08px;">Industrial Property, paragraphs 1 to 4 shall apply onl</div>
<div style="font-size: 15.96px; top: 433.164px; left: 913.08px;">y</div>
<div style="font-size: 15.96px; top: 451.644px; left: 541.08px;">in so far as that State, according to a notification pub-</div>
</body>
</html>
I tried
width:380px; text-align:justify; text-justify:newspaper;
but that did not do anything
<html>
<head>
<style>
div {font-family: arial; position: absolute;}
</style>
</head>
<body>
<div style="font-size: 15.96px; top: 433.164px; left: 541.08px;">Industrial Property, paragraphs 1 to 4 shall apply onl</div>
<div style="font-size: 15.96px; top: 433.164px; left: 913.08px;">y</div>
<div style="font-size: 15.96px; top: 451.644px; left: 541.08px;">in so far as that State, according to a notification pub-</div>
</body>
</html>
I believe that your problem may be that you have each line in its own div. As far as I can tell, text-align: justify; will not stretch out the final line of a block of text.
JamesCssl is quite correct, you would not put text that you want to affect into different DIV's. I dont see any logical reason why you would either.
If you need to start new lines with content then just use <br />
DIV's are known to be inline, in that they will start a new line each time you reference one, there are certain rules you can apply inside of DIV's to override this rule but from what i can see you are over complicating a very simple task.
If you need to start new lines with content then just use <br />
DIV's are known to be inline, in that they will start a new line each time you reference one, there are certain rules you can apply inside of DIV's to override this rule but from what i can see you are over complicating a very simple task.
ASKER
Of course there is a VERY good reason for this. I am not complicating a task, I am trying to make a VERY complicated task work. The text is not generated by me and is not split by hand...
A div is not needed - a span will do, or some other tag, that can be absolutely positioned
What is the idea behind text-justify - does it work or not?
If I add width:380px; to this div, I can make the DIV align to the "y" but not get the text IN the div to spread
<div style="font-size: 15.96px; top: 433.164px; left: 541.08px; width:380px;">Industrial Property, paragraphs 1 to 4 shall apply onl</div>
Thanks
A div is not needed - a span will do, or some other tag, that can be absolutely positioned
What is the idea behind text-justify - does it work or not?
If I add width:380px; to this div, I can make the DIV align to the "y" but not get the text IN the div to spread
<div style="font-size: 15.96px; top: 433.164px; left: 541.08px; width:380px;">Industrial Property, paragraphs 1 to 4 shall apply onl</div>
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
cg_medistox:
divs are block by default, spans are inline. just a bit of confusion there!
mplungjan:
as mentioned already, text will only ever "justify" on a line if it can't fit all of the words on that line. in that case the word that doesn't fit wraps to the next line and the words that did are stretched out (with either letter-spacing, word-spacing or both, I don't know what each browser does) to fill the line. You could manually set the letter-spacing and word-spacing to fit it correctly... but you'd need to do it for every time you want something like this, which I gather isn't an option
divs are block by default, spans are inline. just a bit of confusion there!
mplungjan:
as mentioned already, text will only ever "justify" on a line if it can't fit all of the words on that line. in that case the word that doesn't fit wraps to the next line and the words that did are stretched out (with either letter-spacing, word-spacing or both, I don't know what each browser does) to fill the line. You could manually set the letter-spacing and word-spacing to fit it correctly... but you'd need to do it for every time you want something like this, which I gather isn't an option
ASKER
You are correct. Letter or word spacing is not allowed.
I assumed justify also meant spread out to FILL a container/line if a certain width by using some clever algorithm like they do in Word with right and left justify columns...
I assumed justify also meant spread out to FILL a container/line if a certain width by using some clever algorithm like they do in Word with right and left justify columns...
Even in Word it only justifies when you fill the line
ASKER
No.
If you ask for straight margins, the text will spread to fill out each line
If you ask for straight margins, the text will spread to fill out each line
that's not the same as justify ;-)
a currently restricted but future solution has been given (by JamesCssl); and I suspect the only possible solution you might find for your problem is via javascript or some such.
until CSS3 is fully implemented by the browsers of a large percentage of your expected visitors, I suggest you find a different tactic (i.e. don't use the silly program splitting everything into unnecessary divs)
:-)
a currently restricted but future solution has been given (by JamesCssl); and I suspect the only possible solution you might find for your problem is via javascript or some such.
until CSS3 is fully implemented by the browsers of a large percentage of your expected visitors, I suggest you find a different tactic (i.e. don't use the silly program splitting everything into unnecessary divs)
:-)
ASKER
Hehe... yeah. If I could I would
I just tested -- the method I linked to above does work in Internet Explorer, but not in Firefox or Opera.
Synthetics, thanks for the clarification
My bad
My bad
ASKER
Thanks for the working solution for IE.
It is acceptable.
Now we wait for FF :)
It is acceptable.
Now we wait for FF :)