Is it possible to split by lines and by characters?

[Rigo-m]

If it's possible, it should be documented.

Also, in my use-case I would like to be able to have splitting by lines, words and characters working together with whitespace:true OR i would like to have whitespace:true on words plugin (counting whitespace as a word).

Should this be a feature or am I missing something?

Thanks in advance

[Rigo-m]

Also, shouldn't the lines plugin divide the words inside .line div's?

[ThomasRutzer]

Seems like adding it to depends-List of linePlugin could do that job:

var linePlugin = createPlugin(
    /*by: */ 'lines',
    /*depends: */ [WORDS, CHARS],
    /*key: */ 'line',
    /*split: */ function(el, options, ctx) {
      return detectGrid(el, { matching: ctx[WORDS] }, 'offsetTop')
   }
);

Still, this could / should be an option...

[shshaw]

Currently, it is possible in this way, though it does end up wrapping the words twice:

Splitting({ by: 'lines' }).forEach( s => {
  Splitting({ target: s.el, by: 'chars', force: true })
});

https://codepen.io/shshaw/pen/04873953a73e6d6dc60ad539a35a26ae

Agreed that this should be better supported. Resplitting should also be a little cleaner overall. Making some notes for the next release. Thanks!

[Rigo-m]

using forEach on the output is actually quite clean, I feel stupid for not thinking about that solution. I'm glad I gave you a use case to think about.

Thanks for the answers!

[notoriousb1t]

I believe this might also work and avoid the double wrapping:

Splitting({ by: 'lines' }).forEach(s => { 
  // Use s.words as the target instead of s.el
  Splitting({ target: s.words, by: 'chars', force: true }) 
});

but I don't have time to validate it right at this moment.

[chrisjwaddell]

I'd also love to do animations by line like letting the line float up but the last part of each line float up later than the first part of the line according to it's index within the line. It would be great to have extra variables for line animation. charline-index or linechar-index wordline-index or lineword-index

word-index is 50 but it's 4th on that line.

So you can do something like: transition-delay: calc(var(--linechar-index) * 0.5s) or transition-delay: calc(calc(var(--linechar-index) * 0.1s) + calc(var(--line-index) * 0.8s))

If these line variables were optionally available, that would be great.

By doing it this way, you probably wouldn't need '.word' within a new '.line' class as suggested above. I'm not sure if you would need to do that or not. But --linechar-index and --lineword-index would be easy for users.

[powerbuoy]

Currently, it is possible in this way, though it does end up wrapping the words twice:

Splitting({ by: 'lines' }).forEach( s => {
  Splitting({ target: s.el, by: 'chars', force: true })
});

https://codepen.io/shshaw/pen/04873953a73e6d6dc60ad539a35a26ae

Agreed that this should be better supported. Resplitting should also be a little cleaner overall. Making some notes for the next release. Thanks!

This also seems to strip the space from inside the span.whitespace elements for some reason. You can try tour pen with this HTML instead: <div data-splitting>Hello World World World World World!</div> (I wasn't allowed to fork it).

I believe this might also work and avoid the double wrapping:

Splitting({ by: 'lines' }).forEach(s => { 
  // Use s.words as the target instead of s.el
  Splitting({ target: s.words, by: 'chars', force: true }) 
});

but I don't have time to validate it right at this moment.

This does not remove whitespace, however the (inner) --word-index is always 0 with this approach.

Both do wrap words twice.

For me the ideal solution would be to simply be able to run by: ['lines', 'chars'] and not have any double wrapping or other strange behaviour. Just the same markup as with chars only but with the added lines-variables.

Also, having a span.line around each line would actually be ideal. At least for what I'm trying to accomplish.