What is the correct way for implementing Hyphenopoly?

Question

I'm having trouble implementing Hyphenopoly (https://github.com/mnater/Hyphenopoly) on a Django project. Sometimes it seems to work fine, sometimes not. Besides, on mobile browser the result are unpleasant, since hyphens appears in a pretty inconsistent fashion (or doesn't at all) on elements with italian language. Further, I cannot understand the documentation provided. My fault.

Herein I report part of the directory structure of the project

As you can see, and for what I understood, I loaded only few files from the original library, in order to hyphenate italian and english pieces of text (separated or mixed). The main language is still en, since I defined it in the lang attribute of the html element; for each element featuring italian content, I specified the language attribute accordingly (for mixed content, I used spans).

In the head element of my base.html:

<script src="{% static './hyphens/Hyphenopoly_Loader.js' %}"></script>
<script src="{% static 'HyphenConfig.js' %}"></script>

The HyphenConfig.js file, instead:

$(document).ready(function() {
    var Hyphenopoly = {
        require: {
            'en-us': 'ALL',
            'en': 'ALL',
            'it': 'ALL'
        },
        paths: {
            patterndir: "./hyphens/patterns/",
            maindir: "./hyphens/"   
        },
        setup: {
            selectors: {
                '.hyphenate': {
                    compound: "all",
                    leftmin: 0,
                    rightmin: 0,
                    minWordLength: 4
                }
            }
        }
    };
});

I also defined the hyphenate class in the global css file:

.hyphenate {
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
}

What I expected?

For each element, provided a language (en or it) and the hyphenate class, I expected a better result than what I observed.

Is it the implementation correct, or do I miss any file or configuration?

Answer 1

I'm the author of hyphenopoly.js There are some issues with your implementation.

1. you'll need to call the Hyphenopoly.config-function in the HyphenConfig.js file (https://mnater.github.io/Hyphenopoly/Config.html)
2. To require the desired languages you'll need to give a long word in the required language or "FORCEHYPHENOPOLY" to enforce the usage of hyphenopoly ('ALL' won't work at all).
3. The language "en" isn't supported, but "en-us" and "en-gb" is. If your page uses "en" you'll need to define a "fallback": https://mnater.github.io/Hyphenopoly/Config.html#fallbacks-optional
4. Check the console of your browser for error messages (to make sure if your paths are resolved correctly)
5. 'leftmin': 0 and 'rightmin': 0 doesn't make sense. The values won't be smaller the defined in the patterns (leftmin: 2, rightmin: 3 for en-us and leftmin: 2, rightmin: 2 for it).
6. Keep in mind that most browsers support css-hyphenation for en and it, so hyphenopoly won't kick in (unless you used "FORCEHYPHENOPOLY", see pt 2)

Try the following (not tested):

Hyphenopoly.config({
    require: {
        'en-us': 'supercalifragilisticexpialidocious',
        'it': 'architettonicamente'
    },
    fallbacks: {
        'en': 'en-us'
    },
    paths: {
        patterndir: "./hyphens/patterns/",
        maindir: "./hyphens/"   
    },
    setup: {
        selectors: {
            '.hyphenate': {
                compound: "all",
                minWordLength: 4
            }
        }
    }
});