WebKit Hyphenation

Asked 18/3, 2011 at 19:13 Answered 27/4, 2012 at 2:28

Has anyone successfully been able to implement hyphenation in any of the WebKit browsers? I've tried the CSS3 hyphenation style as well as -webkit-hyphens: auto. No dice for either of those. Or maybe I'm doing something wrong?

Note: I've only tried Safari and Chrome on a Mac.

Update: Code example

<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>

Aparri answered 18/3, 2011 at 19:13 Comment(5)

Where are you trying to implement them, can you give us the text you are using for example? – Inhuman 18/3, 2011 at 19:17

Here's a link to that code (with webkit spelt correctly :) ) jsbin.com/ihama4/2 – Schoolhouse 18/3, 2011 at 21:19

How did you come up with those long words? I only ever heard the first one before. Supercalifragilisticexpialidocious – Fatuity 18/3, 2011 at 21:29

Works on my iPhone perfectly! Exactly what I was looking for. -- Also updated my spelling mistake ;) -- Cheers. – Aparri 18/3, 2011 at 21:29

@George Bailey: Good ol' Wikipedia. Just searched for "longest words". I wish I could say they were off the top of my head... – Aparri 18/3, 2011 at 21:32

-webkit-hyphens works fine on iOS 4.2 and above, and is partially supported in the webkit nightlies.

Webkit:

Webkit

iOS 4.3:

iOS 4.3

Schoolhouse answered 18/3, 2011 at 21:15 Comment(1)

Why, both Safari 9 on desktop and on iOS 9 still uses the -webkit- prefix, other browsers are also unprefixed. – Schoolhouse 15/6, 2015 at 15:44

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

Here is how paragraphs are styled in the 320 and up project (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 is for Firefox)

So justified text in browsers which was a big no-no is slowly becoming a reality.

Hyetography answered 1/12, 2011 at 1:44 Comment(0)

Better days are coming.. After browsing the Editors working draft - In the instance provided I think the better property in future would be 'overflow-wrap:'. 'hyphens:' is really more suited to general formatting requirements, whereas overflow-wrap is for the emergency cases of overly long words that require breaking. The best value would be

* {
overflow-wrap:hyphenate. 
}

Alas overflow-wrap doesen't seem to be supported in any way just yet on the iphone or firefox, and overflow-wrap:hyphenate isn't even in the working draft. (sadface)

Sikkim answered 27/4, 2012 at 2:28 Comment(0)

Recommended topics

Hot tags