Automatic, soft hyphenation in CSS
S

3

1

In December last year, CSS3 Hyphens support supposedly came to Chrome. Also, IE should be on board, in addition to other major browsers.

Update: Upon receiving the answers below, I understand that I misinterpreted the footnote on caniuse.com.
It says: 'Only supports the auto value on Mac for now'.
I interpreted this as meaning 'On the Mac, only the auto value is supported for now'.
But what is really meant is 'The Mac is the only platform where the auto value is supported for now'. /Update.

However, I'm having trouble implementing for either Chrome or IE. I have read several older (and now somewhat outdated) SE posts (1, 2, 3) and made a jsfiddle that unfortunately only yields the intended results in Firefox.

Supposedly, hyphenation should work in IE for my target languages, Norwegian (lang="no") and English (lang="en") without manually adding dictionaries (hyphenate-resource).

Are there modifications that can be made to the fiddle that will make the hyphenation work in IE and/or Chrome without dictionaries? If not, does anyone know a useful hyphenate-resource for Norwegian?

If not we'll have to consider using hypher or hyphenator, but I would prefer avoiding a JavaScript implementation for what I should get natively from the browser.

enter image description here

Sandbank answered 3/3, 2017 at 10:19 Comment(8)
Hi, What is the charcode of the hyphen character you are using? I don't have the no keyboard installed, but from your screen shot the hyphen character rendered looks different to the ansi character - . I have had the same problem with legacy french content produced on a non-windows keyboard. Win+[space] to select a keyboard, choose US or UK English. here is the English character -, here is the french -; from a windows 10 machine. Make sure that your page has a utf-8 content-type meta.Recce
@RobParsons I don't supply the hyphen, the browser (Firefox) does. If I would insert a soft hyphen manually, I would use the ­ HTML element. But what I'm trying to achieve here is to avoid doing it manually.Sandbank
What is the Encoding setting in IE... see View>Encoding menu in IE. Unicode - utf 8 should be selected. Also, check Internet Options>General tab, Accessibility button, uncheck/check "Ignore font styles specified on web pages". Could you post a jsfiddle or snippet please.Recce
@RobParsons l have posted a jsfiddle already, look for "fiddle" in the text (I'll rename it to jsfiddle)Sandbank
Just checked out the jsfiddle in iOS Safari, the hyphenation is working there, also for Norwegian. But Safari is not a main target in my current project.Sandbank
thx. got it. I tried... at the moment I am looking at blog.adrianroselli.com/2015/01/on-use-of-lang-attribute.htmlRecce
Let us continue this discussion in chat.Recce
On Windows 10/IE 11 and edge, using the language codes of 'nn' or 'nb' works for me....but not in FX or chrome! Norwegian bokmål nb Norwegian nynorsk nn -- jsfiddle does not include a lang attribute in its run iframe html tag.Recce
R
2
<!DOCTYPE html>
<html lang="nb">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-language" content="no"/>
    <title>hyphen tests</title>
    <style>
        html,body{height:100%}
        .uc {
        font-family: Code2000, "TITUS Cyberbit Basic", "Doulos SIL",
            "Chrysanthi Unicode", "Bitstream Cyberbit",
            "Bitstream CyberBase", Thryomanes, Gentium, GentiumAlt,
            "Lucida Grande", "Arial Unicode MS", "Microsoft Sans Serif",
            "Lucida Sans Unicode";
        font-family /**/:inherit; /* resets fonts for everyone but IE6 */
        font-size:100%;
}
        body{
        }

        div.main{-moz-column-count:6;
                 -webkit-column-count:6; 
                 column-count:6;

        }


        section, article {
            margin: 0 0;
            outline: 1px orange solid;
        }

h2,p{
    margin:0;
    text-align:justify;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  /*word-break:break-all;*/
}
    </style>
</head>
<body class="uc">
    <script>document.write(document.documentElement.getAttribute('lang'));</script>
    <div class="main">
        <section>
            <h2>none</h2>
            <p>Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <h2>no</h2>
            <p lang="no">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <h2>nn</h2>
            <p lang="nn">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <h2>nb</h2>
            <p lang="nb">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <!--<p>– Denne planen vil skape nye muligheter for folk og lokalsamfunn, og bidra til vekst og utvikling både i byer og distrikter, sier Sanner.</p>
            <p>Planen for lokalisering av statlige arbeidsplasser er et vedlegg til stortingsmeldingen «Bærekraftige byer og sterke distrikter».</p>
            <p>– Så langt i denne regjeringsperioden er det vedtatt å flytte ut eller etablere om lag 630 statlige arbeidsplasser utenfor Oslo. Planen beskriver også hvordan regjeringen nå skal utrede ytterligere etablering av statlig virksomhet i hele landet, sier Sanner.</p>
            <p>– Når statlige virksomheter plasseres i hele landet, kan flere få spennende karrieremuligheter i det lokalmiljøet de kommer fra, og dermed kunne flytte hjem etter fullført høyere utdanning. Med ny teknologi kan statlige virksomheter drives flere steder, og samtidig være tilgjengelige både for publikum og samarbeidspartnere, sier Sanner.</p>
            <p>De nye oppgavene som kan bli flyttet, finnes innen blant annet kunnskapsforvaltning, landbruksforvaltning og administrative tjenester. Blant disse virksomhetene er Politihøgskolen, Språkrådet, Fredskorpset, Likestillings- og diskrimineringsnemnda og deler av NVE.</p>
            <p>- Jeg forstår godt at beskjeder som dette er krevende for de ansatte i disse virksomhetene. Nå skal vi sikre gode prosesser videre, der de ansatte skal bli hørt. Vi har også gode ordninger for ansatte i omstilling, sier Sanner.</p>-->
        </section>
        <section title="English">
            <h2>none</h2>
            <p>As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
            <h2>en</h2>
            <p lang="en">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
            <h2>en-au</h2>
            <p lang="en-au">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
            <h2>en-gb</h2>
            <p lang="en-gb">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
        </section>
        <section title="German">
            <h2>none</h2>
            <p>Als Designer versuchen, Erstellen von funktionalen arbeiten, sind oft wir verpflichtet, unsere Entwürfe als fertige wie möglich aussehen zu machen.</p>
            <h2>de</h2>
            <p>Als Designer versuchen, Erstellen von funktionalen arbeiten, sind oft wir verpflichtet, unsere Entwürfe als fertige wie möglich aussehen zu machen.</p>
        </section>
    </div>
</body>
</html>

enter image description here

Recce answered 10/3, 2017 at 7:52 Comment(7)
How do you get these results in Internet Explorer? I have Internet Explorer 11 (Version 11.0.9600.18537) on Windows 7 (Version 6.1.7601), and when using your markup, I do not get hyphenation on nnand nb. Have you installed extra language packs, and if yes, do you have a link?Sandbank
The issue is with how the browser and addons determines the content-language setting.... Google translate uses the http-equivalent content-language tag and recognises 'no' as Norwegian ... browsers appear to use the lang or xml:lang attribute either on the html tag or the closest parent. IE11 on Win10 only recognises the 'nn' and 'nb' codes. I have not tested on Win7/IE11. Install optional language packs on Win7, from the Optional updates section of Windows update. On the given code try changing the language codes in the Meta content-language, html lang and el.lang elements.Recce
OK, thanks. If not Win7/IE11, what OS & browser is the screenshot in the top right from? It's IE, right?Sandbank
Hi, Windows 10..... use the winkey+arrow keys to tile your windows. It is one screen shot, showing the major browser running the same (local) site, with the same site. FX of coarse is using its own language packs. I have about 30 MS language packs installed.... Native OS language en-us. nn and nb keyboards were installed. MS Language pack for nb (including spellchecker) installed only.Recce
In the 'real' world..... for say a one page website for a small business, you would not confuse visitors by having two or more languages presented in the content.... you either use server side code to redirect to a separate page (in the users Accept list from the request header) or you include the content-language meta or header, so that a userAgent translator can detect the content-language and translate it for them.Recce
I highly recommend that you take a close look at Wikipedia and how they support content in multiple languages. the uc class that I used (stands for Unicode) is taken directly from their site.Recce
Because jsfiddle does not allow you to edit the html tag or the head meta tags, you cannot use it to test internationalization problems. In the solution provided the http-equivalent content-language meta of 'no' is used while the html tag lang attribute of 'nn' or 'nb' is used because the Google translator is hardwired to use the no code in the header or meta content-language setting. Bing translator only recognises nn or nb in the html lang attribute.Recce
I
2

I'm afraid Chrome only supports hyphens: auto on Mac for now (and mdn seems to imply only for english as well, not sure). The job to support it for Windows/Android/Chrome OS is here.

To get hyphens: auto to work in IE you have to have the correct language packs installed. I also had to use either lang="nn" or lang="nb". lang="no" didn't seem to work.

Note: I don't actually know what I'm talking about, this is just from experimenting.

Idden answered 8/3, 2017 at 16:11 Comment(0)
R
2
<!DOCTYPE html>
<html lang="nb">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-language" content="no"/>
    <title>hyphen tests</title>
    <style>
        html,body{height:100%}
        .uc {
        font-family: Code2000, "TITUS Cyberbit Basic", "Doulos SIL",
            "Chrysanthi Unicode", "Bitstream Cyberbit",
            "Bitstream CyberBase", Thryomanes, Gentium, GentiumAlt,
            "Lucida Grande", "Arial Unicode MS", "Microsoft Sans Serif",
            "Lucida Sans Unicode";
        font-family /**/:inherit; /* resets fonts for everyone but IE6 */
        font-size:100%;
}
        body{
        }

        div.main{-moz-column-count:6;
                 -webkit-column-count:6; 
                 column-count:6;

        }


        section, article {
            margin: 0 0;
            outline: 1px orange solid;
        }

h2,p{
    margin:0;
    text-align:justify;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  /*word-break:break-all;*/
}
    </style>
</head>
<body class="uc">
    <script>document.write(document.documentElement.getAttribute('lang'));</script>
    <div class="main">
        <section>
            <h2>none</h2>
            <p>Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <h2>no</h2>
            <p lang="no">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <h2>nn</h2>
            <p lang="nn">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <h2>nb</h2>
            <p lang="nb">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <!--<p>– Denne planen vil skape nye muligheter for folk og lokalsamfunn, og bidra til vekst og utvikling både i byer og distrikter, sier Sanner.</p>
            <p>Planen for lokalisering av statlige arbeidsplasser er et vedlegg til stortingsmeldingen «Bærekraftige byer og sterke distrikter».</p>
            <p>– Så langt i denne regjeringsperioden er det vedtatt å flytte ut eller etablere om lag 630 statlige arbeidsplasser utenfor Oslo. Planen beskriver også hvordan regjeringen nå skal utrede ytterligere etablering av statlig virksomhet i hele landet, sier Sanner.</p>
            <p>– Når statlige virksomheter plasseres i hele landet, kan flere få spennende karrieremuligheter i det lokalmiljøet de kommer fra, og dermed kunne flytte hjem etter fullført høyere utdanning. Med ny teknologi kan statlige virksomheter drives flere steder, og samtidig være tilgjengelige både for publikum og samarbeidspartnere, sier Sanner.</p>
            <p>De nye oppgavene som kan bli flyttet, finnes innen blant annet kunnskapsforvaltning, landbruksforvaltning og administrative tjenester. Blant disse virksomhetene er Politihøgskolen, Språkrådet, Fredskorpset, Likestillings- og diskrimineringsnemnda og deler av NVE.</p>
            <p>- Jeg forstår godt at beskjeder som dette er krevende for de ansatte i disse virksomhetene. Nå skal vi sikre gode prosesser videre, der de ansatte skal bli hørt. Vi har også gode ordninger for ansatte i omstilling, sier Sanner.</p>-->
        </section>
        <section title="English">
            <h2>none</h2>
            <p>As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
            <h2>en</h2>
            <p lang="en">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
            <h2>en-au</h2>
            <p lang="en-au">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
            <h2>en-gb</h2>
            <p lang="en-gb">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
        </section>
        <section title="German">
            <h2>none</h2>
            <p>Als Designer versuchen, Erstellen von funktionalen arbeiten, sind oft wir verpflichtet, unsere Entwürfe als fertige wie möglich aussehen zu machen.</p>
            <h2>de</h2>
            <p>Als Designer versuchen, Erstellen von funktionalen arbeiten, sind oft wir verpflichtet, unsere Entwürfe als fertige wie möglich aussehen zu machen.</p>
        </section>
    </div>
</body>
</html>

enter image description here

Recce answered 10/3, 2017 at 7:52 Comment(7)
How do you get these results in Internet Explorer? I have Internet Explorer 11 (Version 11.0.9600.18537) on Windows 7 (Version 6.1.7601), and when using your markup, I do not get hyphenation on nnand nb. Have you installed extra language packs, and if yes, do you have a link?Sandbank
The issue is with how the browser and addons determines the content-language setting.... Google translate uses the http-equivalent content-language tag and recognises 'no' as Norwegian ... browsers appear to use the lang or xml:lang attribute either on the html tag or the closest parent. IE11 on Win10 only recognises the 'nn' and 'nb' codes. I have not tested on Win7/IE11. Install optional language packs on Win7, from the Optional updates section of Windows update. On the given code try changing the language codes in the Meta content-language, html lang and el.lang elements.Recce
OK, thanks. If not Win7/IE11, what OS & browser is the screenshot in the top right from? It's IE, right?Sandbank
Hi, Windows 10..... use the winkey+arrow keys to tile your windows. It is one screen shot, showing the major browser running the same (local) site, with the same site. FX of coarse is using its own language packs. I have about 30 MS language packs installed.... Native OS language en-us. nn and nb keyboards were installed. MS Language pack for nb (including spellchecker) installed only.Recce
In the 'real' world..... for say a one page website for a small business, you would not confuse visitors by having two or more languages presented in the content.... you either use server side code to redirect to a separate page (in the users Accept list from the request header) or you include the content-language meta or header, so that a userAgent translator can detect the content-language and translate it for them.Recce
I highly recommend that you take a close look at Wikipedia and how they support content in multiple languages. the uc class that I used (stands for Unicode) is taken directly from their site.Recce
Because jsfiddle does not allow you to edit the html tag or the head meta tags, you cannot use it to test internationalization problems. In the solution provided the http-equivalent content-language meta of 'no' is used while the html tag lang attribute of 'nn' or 'nb' is used because the Google translator is hardwired to use the no code in the header or meta content-language setting. Bing translator only recognises nn or nb in the html lang attribute.Recce
B
1

A workaround (no CSS solution) for as long as you need to support browsers instead of the other way around:

Use server side hyphenation with the line break interator from ICU, and insert <wbr> tags. Scripting languages like PHP support these kind of purposes.

Then browsers will hypthenate as dictated, and there is no need for client side JS libraries, you can do everything else with CSS.

Betaine answered 13/6, 2017 at 8:33 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.