Making odd text-lines longer

[phi5]

To achieve an evenly rythm of uneven text-line-lengths, I tried to put divs at the end of each second line. You can See the differente in this example by hovering over the text:
https://codepen.io/phi5/pen/PmGMWL

Of course this is not the right way to do it. Especially, because in Responsive Websites, which this example is meant for, you never know how many lines there will be.

Is there a better way to achieve something like that?

[Atelierbram]

Don’t know if that’s what you want, but maybe text-align: justify on paragraphs?

p {
  hyphens: auto;
  text-align: justify;
}

[phi5]

I don’t want justified Text, but flush left.
Nevertheless I would like every second line to be slightly longer, than the previous one. That is something classical Print-Typographers tried to achieve.

[Atelierbram]

OK, now it’s clear. JavaScript can solve this, CSS can’t, at least not now. After watching the conference presentation called “defining auto” by CSS-spec writer Fantasai on the inner workings of browser’s layout engines vimeo.com/134597090 one will understand when I write “and don’t hold you’re breath”.

A question for javaScript experts could be: how do we select every odd line of a paragraph, and wrap it in a <span class="odd"></span>?

After that we can simply adjust the max-width or right margin on odd.

[Atelierbram]

Like this:
stackoverflow.com/questions/15830449/how-to-target-alternate-odd-even-text-lines/15831491#15831491

[phi5]

Yes, thats nearly. what I was looking for, if there is no CSS solution. . But if I understand it right, this javascript wraps any word within a span-Element. So this would not work with hyphenation, right? And the whole classical idea of changing line-length every second line makes sense only in combination with hyphenation.

[Atelierbram]

I haven’t found a good demo with vanilla javaScript, but if you don’t mind jQuery, than this demo: codepen.io/jnowland/pen/AifjK/ wraps every line so maybe try that one.

Forked you’re demo, combined it with the javaScript from the demo above, but it will not work with hyphenation. CSS hyphenation has it’s own scope, so maybe if one would use a javaScript polyfill for hyphenation like described here: davidnewton.ca/the-current-state-of-hyphenation-on-the-web than maybe this could work.

http://codepen.io/atelierbram/pen/vmedWm

[Author]

Posts