Using Hyphenopoly with other lib (paged.js inside)

[julientaq]

Hi there! First, thanks for the great lib

@nicolastaffin and I are trying to use hyphenopoly with paged.js (https://pagedjs.org).

But we’re kind of stuck.

Paged.js uses hooks to run arbitrary code.

When Pagedjs loads the content, it moves the body.innerHTML in a template element that has no language attribute;

Then i’d like to run whatever DOM transformation we need (in that case, some modification in the content to allow/restrain hyphenation) before running Hyphenopoly on the template element.

I’m running Hyphenopoly (using the hyphenators["html"]) but it breaks. The console output is the following: Uncaught (in promise) TypeError: Cannot read property 'minWordLength' of undefined

Do you have any insight on how i can make it work? I’ve been trhough the doc, looked at the hyphenator, but i just can’t figure out what to do.

i put my files in there so you can have a look if that can help.

Thanks again for the work on this lib :)

pagedjs-hyphenopoly.zip

[mnater]

Hi

Thank you for this question. I started developing Hyphenopoly (respectively its predecessor Hyphenator.js) because I wanted to replicate the layout of TeX documents in the Web and therefor needed hyphenation. But I never made it this far. Now I'm happy to see how my lib may help to produce such beautiful documents.

I hope I can help with this issue...

Analysis of the issue: The function returnes by Hyphenopoly.hyphenators["HTML"] takes a second parameter selector wich defaults to .hyphenate. There are no settings for the selector .hyphenate and thus the described error occurs.

But there are more problems:

• Since there are settings defined for the selector p Hyphenopoly will not collect the <p>-elements inside the <section> element, because it "thinks" these elements are already handled.
• When we execute a hyphenator on the <selection> element the settings given for its child-elements (p, li etc.) are not respected in the current implementation. Thus we'll have to call the hyphenator for each element that has individual settings.

Solution: In noHyphens.js try this:

// then run hyphenopoly
    Object.keys(Hyphenopoly.setup.selectors).forEach(sel => {
      content.querySelectorAll(sel).forEach(elem => {
        Hyphenopoly.hyphenators["HTML"].then((hyn) => {
          hyn(elem, sel);
        });
      });
    });

Although not very beautiful it works for the example you sent.

Further thoughts: The logic you intend to implement in noHyphens.js is already partially available in Hyphenopoly:

• Prevent hyphenation of words containing an uppercase character: https://mnater.github.io/Hyphenopoly/Setup.html#mixedcase
• Handling words containing a "-": https://mnater.github.io/Hyphenopoly/Setup.html#compound
• Black-/Whitelisting of words: https://mnater.github.io/Hyphenopoly/Setup.html#exceptions

[julientaq]

Oh! Thanks a lot! This is a clear explanation! 

I’ve tried that code, and it seems to work.

One thing though, since Hyphenopoly doesn’t run on the content, it never really finishes and the HTML never get out of the visibility: hidden !important; stays up. I found the full setup config (i’m a litte less bit lost in the docs thanks to your help :D), so i remove the hiding.

I’ll let @nicolastaffin check the code for the micro typography configuration and we’ll be back!

Can’t wait to show you books done with it :)

Thank you very much!

[mnater]

I totally forgot about the hiding. Your approach is correct. Please excuse the circumstances.

I'll close this issue for now - but feel free to reopen anytime. If there are any adjustments needed in Hyphenopoly, just let me know.

[julientaq]

No need to excuse yourself!

Thanks again for all the work you’ve done here. it’s amazing!