Best IT Recipes

WebKit hyphenation forwarding

Has anyone successfully migrated to any of the WebKit browsers? I tried the CSS3 hyphenation style as well as -webkit-hyphens: auto . No dice for any of them. Or maybe I'm doing something wrong?

Note. I just tried Safari and Chrome on Mac.

Update: Sample Code

 <html> <head> <style> div { -webkit-hyphens: auto; } </style> </head> <body> <div style="width: 150px; border: solid 1px black;"> <p>Anaideia, spirit of ruthlessness, shamelessness, and unforgivingness</p> <p>Supercalifragilisticexpialidocious, Antidisestablishmentarianism, Floccinaucinihilipilification, Hippopotomonstrosesquipedaliophobia</p> </div> </body> </html>
+16
css webkit
Mar 18 '11 at 19:13
source share
3 answers

-webkit-hyphens works great on iOS 4.2 and above and is partially supported by webkit nightclubs.

Webkit:

Webkit

iOS 4.3:

iOS 4.3

+25
Mar 18 '11 at 9:15
source share

It works in Safari (tested with Safari 5.1 on OS X Lion and Safari on iPad), and not with Chrome. See http://caniuse.com/css-hyphens for support for hyphen browsers.

Here is how the paragraphs are written in project 320 and higher ( http://www.stuffandnonsense.co.uk/projects/320andup/ ):

 p { hyphens:auto; text-align:justify; -webkit-hyphens:auto; -webkit-hyphenate-character:"\2010"; -webkit-hyphenate-limit-after:1; -webkit-hyphenate-limit-before:3; -moz-hyphens:auto; }

(last line for Firefox)

Thus, legitimate text in browsers, which was big no-no, is gradually becoming a reality.

+12
Dec 01 2018-11-11T00:
source share

The best days are coming ... After viewing the Editors of the working draft - In the above example, I think that the best thing in the future will be "overflow" -wrap: '. A hyphen is really more suited to general formatting requirements, while overflow is an emergency case with excessively long words that require breaking. Best value would be

 * { overflow-wrap:hyphenate. }

Alas, overflow-wrap does not seem to be supported in any way only on iphone or firefox and overflow: porting does not even work in a working project. (Sadface)

+3
Apr 27 '12 at 2:28
source share


More articles:


All Articles