How can I use hyphenation in Google Chrome browser?
Hyphenation is currently supported on Chrome only on Android and macOS (and only the "auto" value), as you can see here: http://caniuse.com/#search=hyphens
I used Hyphenator too, as suggested by Eric.
Automatic, soft hyphenation in CSS
<!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>
Why don't hyphens work for Chrome on Windows?
Updated Answer: As of Chrome v88, this feature is available for use in Windows. Remember that you will need to have soft hyphens () in your text where you want hyphens to appear based on container space.
Original Answer:
When Chrome shipped this feature, they did so without support for Windows.
Enable CSS hyphens property on stable
This patch enables CSS hyphens property on stable.
Following values are valid at this point:
- Android/Mac: manual | none | auto
- Other platforms: manual | none
BUG=605840
Review-Url: https://codereview.chromium.org/2342553003
Cr-Commit-Position: refs/heads/master@{#419461}
(emphasis mine)
As for when it will be available for use on Windows or other platforms, you can track that for yourself on the bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=652964
Note that Microsoft Edge only recently moved to a Chromium engine from its original EdgeHTML engine. Pre-Chromium versions of Edge still support hyphens just fine, just like Firefox. Newer versions of Edge, along with Chromium powered browsers like Chrome, Brave, Vivaldi, et al will suffer from this deficiency until it is implemented in Chromium.
In the future, I recommend checking for such support gotchas on the website https://caniuse.com - it usually has good information about feature support and any implementation details as footnotes (as it did in the case of hyphens).
How to check the CSS hyphens in effect using Chrome developer tools?
For a moment hyphens are not supported by chrome (except default value 'none' that gives nothing), so you will rather see no effect, maybe try some javascript solution instead: https://github.com/mnater/hyphenator
http://caniuse.com/#search=hyphens
(soft hyphen) and Chrome and Safari
Especially considering your fonttest website, it seems that the problem is caused by two factors: some WebKit browsers on OS X a bug that make them render a soft hyphen character inside a line of text using a glyph for it, instead of just treating it as a control character; and the StagSansWeb font either has no glyph for it (making the browsers use a dummy glyph) or have an odd-looking glyph for it. If these browsers additionally treat the soft hyphen as allowing hyphenation, this would explain the symptoms, provided that Helvetica has an empty glyph for the soft hyphen.
This is highly speculative, or conjectural.
On a more solid basis, the rendering of text where hyphenation has taken place has not been rigorously defined in standards. If browsers apply hyphenation on foobar, they are supposed to render “foo” followed by a hyphen at the end of a line, but the standards don’t say which hyphen. It could be HYPHEN-MINUS (i.e., the Ascii hyphen), or HYPHEN, or even SOFT HYPHEN, if it has a glyph. Maybe even something else. And it may even depend on language, as some languages have hyphens of their own.
So it is understandable that WebKit browsers have started supporting the proprietary property -webkit-hyphenate-character. However, it does not seem to be properly implemented. Testing -webkit-hyphenate-character: "\00AD" on Chrome and Safari on Windows 7, I notice that they “hyphenate” words (containing soft hyphens) without adding any hyphen (as if they used an empty glyph), even though other values for the property work OK.
To conclude, I would expect that you can avoid the issue by avoiding fonts like StagSansWeb for texts that may get hyphenated. It is possible that the problem can be fixed by modification to the font.
CSS hyphenate issues with longer words in Chrome
hyphens is only a Working Draft CSS property at present and currently is not fully implemented or supported by all browsers.
I suggest you review the support tables at CanIUse.com which has the following notes.
Chrome < 55 and Android 4.0 Browser support "-webkit-hyphens: none", but not the "auto" property. It is advisable to set the @lang attribute on the HTML element to enable hyphenation support and improve accessibility.
For Chrome: Only supported on Android & Mac platforms (and only the "auto" value) for now.
Related Topics
Scale HTML Table Before Printing Using CSS
How to See the Print Media CSS in Firebug
How Are Scrollbars in New Google Docs UI Styled (Esp. the Arrow Buttons)
How to Create a CSS3 Gradient in Opera
CSS - Circle Border with Various Colors
Xmlns W3 Url for Svg Spec Now Throwing Error in Chrome
Selector for One Tag Directly Followed by Another Tag
Can't Style Text on Input Submit Button as Bold
H1 Tag and P Tag on the Same Line
Yui Reset CSS Makes <Strong><Em>This Not Work</Em></Strong>
How to Use Svg Sprite Sheet as CSS Background-Image While Maintaining Aspect Ratio and Scalability
Can You Blur the Content Beneath/Behind a Div
Stretch a Background Image in IE8
How to Fade-Out the End of a Text Line in CSS
Why Does User Agent Stylesheet Override My Styles
Chrome Position:Fixed Inside Position:Absolute Breaking with Iframe/Video