Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS hyphenation language

Is it possible to define the language used for -webkit-hyphens:auto? Does it default to the system language?

<p style="-webkit-hyphens:auto" lang="en">
Hyphenated in English
</p>
<p style="-webkit-hyphens:auto" lang="es">
Hyphenated en Español
</p>

According to the Mozilla documentation the hyphens property will use the language specified in the lang HTML attribute. However, I can't find any mention of the -webkit-hyphens property in the Safari documentation.

Additionally, does the meta language attribute have any effect? Or can this be applied applied to the html element?

Here's the fiddle I'm using for testing (in Safari and Firefox).

like image 727
hpique Avatar asked Oct 26 '11 18:10

hpique


People also ask

Can I use CSS hyphens?

By default, CSS sets no limit to the number of consecutive hyphens, but you can use the hyphenate-limit-lines property to specify a maximum. Currently this is only supported by IE/Edge and Safari (with prefixes).

What is hyphen format?

A hyphen ( - ) is used to link parts of a compound word. This includes most dual heritages (Mexican-American), and all words in a compound modifier except "very" and adverbs that end in "ly." (The Broncos scored a first-quarter touchdown.)


1 Answers

Is it possible to define the language used for -webkit-hyphens:auto?

Yes.

However, I can't find any mention of the -webkit-hyphens property in the Safari documentation.

According to the webkit changelog, it does allow the language to be specified.

https://bugs.webkit.org/show_bug.cgi?id=43467

You may need to use -webkit-hyphenate-locale to get it to work.

Or can this be applied applied to the html element?

According to this post and its examples, you can set the lang attribute right in the element.

http://drublic.de/blog/css3-auto-hyphenation-for-text-elements/

like image 76
Jason Gennaro Avatar answered Oct 20 '22 15:10

Jason Gennaro