All geek questions in one place

How to optimize migration

I struggle with the various ways that browsers carry hyphenation for justified text from line to line. I have the following css settings for my text:

text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;

My language settings en . One word that is processed inconsistently "expresses":

 Chrome: no hyphenation Firefox: express-ing [correct!] IE11: express-ing [correct!] Safari: express-ing [correct!]

Worried, Safari may translate the German word "Gesamtkunstwerk":

 Chrome: no hyphenation Firefox: no hyphenation IE11: no hyphenation Safari: Gesamtkunst-werk [correct!]

I have no idea how Safari feels that this word is German, and carries it. Any ideas?

The CSS3 specification specifies the hyphenate-resource parameter, but I did not find example files for inclusion and / or editing. Ideally, if this option is supported among major browsers, I would enable it and want to edit it for non-English words, as well as edit its default values.

What is the best approach?

+2
source share
1 answer

I struggle with different ways when browsers carry hyphenated text from line to line.

Method 1: CSS
See this link for CSS only solution.

 article p{ text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

You have already tried this and found out that Chrome is absolutely not supported, regardless of the version of the browser, and you saw that the browsers did not have consistent results. And, probably, I wonder if there is a more consistent way of hyphen words that work well on ALL major browsers?

Method 2. Javascript
See this link for a solution that works in all major browsers. And ... with even more language support than most browsers. First, select one (or several) languages ​​in which you need support on your site, then follow the steps and configure your own script, and then finally click "Create!" which will create mini javascript for you. You will copy this into your hyphenate.js file and finally remember to define the class in the paragraphs that you want to wrap.

 <head> <script src="hyphenate.js" type="text/javascript"></script> </head> <body> <article lang="nl" class="hyphen"> // in this case Dutch >> NL <p>.......</P? </article> </body>

Note: notification I have configured the class and shortened to hyphen instead of the default hyphen

0
source

Source: https://habr.com/ru/post/1265215/

More articles:


All Articles