-1

I want to loop trough a < p > and resize every automatic(!) AND < br > linebreak smaller than eg. 85% but greater 50% only with word-/letter-spacing to 100% width of parent container - if it's not the last line before < p >.

so when i have:

<div width="200px"><p>
This will be displayed in a monospaced font. The first four spaces
will be stripped off, but all other whitespace will preserved.<br />
will be off, but all other whitespace will preserved.<br />
Markdown and HTML are off in code blocks:<br />
This is not italic</i>, [this is not a link](http://example.com)
This is not italic</i>, [this is a link](http://example.com)
End of it.
</p></div>

should be:

...<p>
This will be displayed in a monospaced font. The first four spaces
will  be stripped off, but  all other  whitespace  will  preserved.<br />
will   be   off,  but   all   other   whitespace   will  preserved.<br />
Markdown and HTML are off in code blocks:<br />
This  is not italic</i>,  [this is not  a link](http://example.com)
This   is  not  italic</i>,  [this is  a link] (http://example.com)
End of it.
</p>...

When i use text-align justify no word-spacing is added and i want a "real" justified text. I really searched a lot for days now, but i don't find any code what does what i want.

Maybe someone can help me :)

mahakala
  • 3
  • 3

1 Answers1

0

There is not such thing as "line" in DOM. It means you cannot simply loop through lines in a javascript solution. Maybe you can approximate number of lines for specific font face, but it's not good solution. For "real" justified text you should use text-align: justify;.

Also, I suggest to take a look at answers to this question: Should I avoid using "text-align: justify;"?

Community
  • 1
  • 1
Mehdi
  • 4,202
  • 5
  • 20
  • 36
  • `text-align: justify;` doesn't solve the problem. see [link](http://jsfiddle.net/zX9x5/64/) and it's possible in dom and with jquery. i found code for all steps but i'm not such a "hacker" to make my own of it. afaik it's about 20-30 lines of code for the one who understand it. – mahakala Dec 11 '13 at 11:13
  • e.g. [link](https://github.com/bramstein/typeset) typeset - but this didn't suite my needs and is a lot to heavy... something like [link](http://code.google.com/p/jqdynamicfontsize) Jqdynamicfontsize - simple and small code. only changed size against word-spacing and done this line by line... – mahakala Dec 11 '13 at 11:30
  • His trick is to wrap each word with ``, then by monitoring the y-position-changes through paragraph, you find the automatic line breaks of browser. This part is heavy enough! Even adding the line breaks in justified way is a heavy algorithm. According to [this article](https://en.wikipedia.org/wiki/Word_wrap) dynamic algorithm to find the best line breaks costs you O(n^2). – Mehdi Dec 12 '13 at 00:22
  • thanks for your answer. what link do you mean by "his"? at the moment i try to do it hardcode it in php, what works more or less fine. – mahakala Dec 12 '13 at 12:26
  • really sorry for delays on replying. That "his" referred to developer of that first link. – Mehdi Jan 12 '14 at 22:02