How should Hyphenopoly be properly implemented?

I am encountering difficulties while trying to integrate Hyphenopoly into a Django project. The functionality sometimes works smoothly, but other times it does not. Additionally, when viewed on a mobile browser, the hyphenation appears inconsistent or even nonexistent on elements containing Italian text. To make matters worse, I am struggling to comprehend the provided documentation. It seems to be my own fault.

Below is a snapshot of the project's directory structure

Based on my understanding, I have only loaded a few files from the original library in order to hyphenate Italian and English text fragments, whether separate or combined. The primary language remains English, as I have specified in the lang attribute of the html element. For elements containing Italian content, I have appropriately set the language attribute (and used spans for mixed content).

In the head section of my base.html:

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

The HyphenConfig.js file contains:

$(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 have also declared the hyphenate class in the global CSS file:

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

What was my expectation?

I expected a more satisfactory outcome for each element that has a language attribute (either en or it) and is assigned the hyphenate class. However, the results did not meet my expectations. Could it be an issue with the implementation, or am I missing a file or configuration?

Answer №1

Greetings, I am the developer behind hyphenopoly.js and I have some feedback about your implementation.

  1. In order to properly configure Hyphenopoly, make sure to call the Hyphenopoly.config-function in the HyphenConfig.js file ()
  2. To include the required languages, use a long word in the desired language or "FORCEHYPHENOPOLY" to enforce hyphenopoly usage (using 'ALL' will not work).
  3. Please note that "en" language is not supported, but "en-us" and "en-gb" are. If your page uses "en", define a "fallback":
  4. Check your browser console for error messages to ensure correct path resolution.
  5. Setting 'leftmin': 0 and 'rightmin': 0 does not make sense. The values should not be smaller than the defined 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 English and Italian, so hyphenopoly may not be necessary unless you use "FORCEHYPHENOPOLY" as mentioned in point 2.

Feel free to try the following configuration (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
            }
        }
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Next.js experiencing development server compile errors and broken page routing in production builds

Howdy everyone! I'm currently working on an app using Next.js. Every time I make a change, the server automatically compiles with the updates, but unfortunately, the pages often fail to render properly. Sometimes it takes several minutes for them to l ...

What is the best way to assign a secondary name to a form field in Django python forms?

My website features a form that is dynamically generated using a python loop to call each field by its variable name. The following is the snippet of HTML code used: {% csrf_token %} {% for form_field in task_form %} <div class ="wrap-input2 vali ...

iOS device encounters failure with Ajax CORS request and redirect

I am experiencing an issue where a URL is being redirected to another domain by the server. My test code is very simple: $.ajax({ type:"GET", url:"{MYURL}", success:function(d){alert('response');} }) You can che ...

Retrieve the latency of the interaction.reply() method

While there have been many inquiries regarding how to create a ping command for a discord.js bot, my question stands out because I am attempting to develop this command for interaction rather than message. I attempted utilizing Date.now() - interaction.cre ...

Is it possible to transform a webpack configuration into a Next.js configuration?

i have come across a webpack configuration setup from https://github.com/shellscape/webpack-plugin-serve/blob/master/recipes/watch-static-content.md: const sane = require('sane'); const { WebpackPluginServe: Serve } = require('webpack-plugin ...

Auto Suggest: How can I display all the attributes from a JSON object in the options list using material-ui (@mui) and emphasize the corresponding text in the selected option?

Currently, I am facing a requirement where I need to display both the name and email address in the options list. However, at the moment, I am only able to render one parameter. How can I modify my code to render all the options with both name and email? ...

Is Django version 1.5.1 still compatible with mod_python version 3.3.1?

I am currently using Django version 1.5.1 and mod_python version 3.3.1. Is mod_python still supported by Django? ...

A guide on how to group by multiple keys and calculate the sum of multiple property values within a JavaScript array using Node.js

Can you suggest the most efficient method to group by multiple keys and calculate the sum of multiple property values in a JavaScript array? For example: [ { Category: "Category 1", Subcategory: "Subcategory 1", Value1: "15&q ...

Checking the Signature with Elrond in the Backend using PHP

My latest decentralized application allows users to log in using their Elrond wallet and generate a unique signature containing their wallet address and additional data. As part of the authorization process, the signature is included in the payload of req ...

Is the functionality of defineProperty for elements malfunctioning on iOS6?

There seems to be an issue with JavaScript's defineProperty and __defineSetter not working on elements in iOS6. It functions correctly on all other browsers and earlier versions of iOS. Does anyone have more information on this? <input id='Bu ...

What are some strategies for receiving multiple responses with just one ajax request?

. I am having trouble grasping the concept of using ajax and how to get multiple responses while passing a single request. Can anyone provide me with a sample code to help me understand better? ...

Targeting lightgallery.js on dynamically added elements in Javascript: The solution to dynamically add elements to

I am facing a challenge in targeting dynamically added elements to make them work with lightgallery.js. Take a look at the example below: <div id="animated-thumbs" class="page-divs-middle"> <!-- STATIC EXAMPLE --> ...

tips for accessing variables within app.get

Is there a way to make a variable or a set of variables inside app.get accessible throughout the entire project? I am working on capturing information from an SMS text message, organizing it into the "messageData" variable, and then sending it to the "Mess ...

Is there a way to adjust user privileges within a MenuItem?

One of my tasks is to set a default value based on the previous selection in the Userlevel dropdown. The value will be determined by the Username selected, and I need to dynamically update the default value label accordingly. For example, if "dev_sams" is ...

ui-router: Converting URL parameters

Is there a way to seamlessly transform URL parameters? Let me illustrate with a scenario. Our URL structure is like this: /shopping/nuts/:productId /shopping/berries/:productId /shopping/juice/:productId The products in our app, fetched from an API, may ...

Monitor any alterations in the object

// Here is a simple demonstration of changing a Javascript object / string var object = "hello"; // Let's assume there is a button in the DOM that, when clicked, will change the object value document.getElementById("button").onclick = function(){ ...

What could be causing my ES6 code to fail compilation post npm install?

Check out my npm module built with es6 on Github here. Within the package.json file, there are scripts designed to ensure proper building of the es6 modules. When using npm publish and npm install within the module's directory, everything works fine. ...

transferring a JavaScript variable to PHP upon submitting a form

This question arises after my previous inquiry on the topic of counting the rows in an HTML table using PHP. Since I didn't find a solution that worked for me, I am exploring new methods but struggling with the implementation. My approach involves ass ...

What are the ways to utilize vue-i18n setup within and beyond Vue components when working with Quasar?

Hello, fellow developers. I am currently working on implementing internationalization in Quasar, using Vue 3 (Composition API) and vue-i18n. My goal is to make internationalization available throughout the entire application, not just within Vue components ...

Tips for resolving the "unsafe-eval" issue in Vue3 on the client-side platform

My app is built using Express, cors, and helmet. I have incorporated Vue3 on the client-side only, with the library file being self-hosted in the public folder. To add the module to the client-side, I simply include the following script: <script type=&q ...