April 10th, 2018

Dealing with a mixed language document, this is working out nicely for small screens:

[lang="de"] {
    hyphens: auto;
}

Also on Twitter

Reply Retweet Favourite

Responses

Charlie Owen

Given the German homework I’m doing right now, can I suggest this? [lang=”de”] { display: none; }

Eric Eggert

Replied to

Jeremy posted a solution for multi-language sites where you want to switch hyphenation on when the page language is set to (for example) German:

[lang="de"] { hyphens: auto; }

This works great until you have code on the page. Even if we have word-wrapping for code enabled (and we should on responsive sites), hyphenation is not what we want, usually. The same goes for code in sentences. So I’d suggest to add the following to the CSS:

[lang="de"] pre, [lang="de"] code { hyphens: none; }

Taylor Hunt

You may be interested in the the :lang() pseudo-class, since it’s slightly more robust:developer.mozilla.org/en-US/docs/Web… • Matches by subtag, so :lang(de) matches lang=”de-DE” • Does the right thing if you have nested lang declarations, like German-inside-English-inside-German

# Posted by Taylor Hunt on Wednesday, April 11th, 2018 at 11:59pm

43 Likes

# Liked by Shaun Bellis on Tuesday, April 10th, 2018 at 1:46pm

# Liked by maxart on Tuesday, April 10th, 2018 at 1:47pm

# Liked by James Edwards on Tuesday, April 10th, 2018 at 1:48pm

# Liked by ☯ Evil Jim O'Donnell on Tuesday, April 10th, 2018 at 2:16pm

# Liked by Ben Seven on Tuesday, April 10th, 2018 at 2:16pm

# Liked by Toru on Tuesday, April 10th, 2018 at 2:16pm

# Liked by Kevin Whitaker on Tuesday, April 10th, 2018 at 2:16pm

# Liked by Fabian Gündel on Tuesday, April 10th, 2018 at 2:16pm

# Liked by Mark Everitt on Tuesday, April 10th, 2018 at 2:17pm

# Liked by Scott Mallinson on Tuesday, April 10th, 2018 at 2:17pm

# Liked by Fabrizio Calderan on Tuesday, April 10th, 2018 at 2:17pm

# Liked by Mateo on Tuesday, April 10th, 2018 at 2:17pm

# Liked by Ralph Brandi on Tuesday, April 10th, 2018 at 2:17pm

# Liked by Giovanni on Tuesday, April 10th, 2018 at 2:17pm

# Liked by ryo watanabe | 渡辺竜 on Tuesday, April 10th, 2018 at 2:17pm

# Liked by Joel Rodelo on Tuesday, April 10th, 2018 at 2:17pm

# Liked by Vedran Rudelj ≠ ☃ on Tuesday, April 10th, 2018 at 2:17pm

# Liked by Connor Bär 🐼 on Tuesday, April 10th, 2018 at 2:55pm

# Liked by ポッシュート on Tuesday, April 10th, 2018 at 2:56pm

# Liked by Michael R. Lorek on Tuesday, April 10th, 2018 at 2:57pm

# Liked by s1lentechoes on Tuesday, April 10th, 2018 at 2:57pm

# Liked by Dr. Bernd Müller on Tuesday, April 10th, 2018 at 2:57pm

# Liked by Jörg Schmidtmann on Tuesday, April 10th, 2018 at 2:57pm

# Liked by Sebastian Benz on Tuesday, April 10th, 2018 at 2:57pm

# Liked by Gerardo Rodriguez on Tuesday, April 10th, 2018 at 3:29pm

# Liked by Patrick Kettner on Tuesday, April 10th, 2018 at 3:29pm

# Liked by Christof on Tuesday, April 10th, 2018 at 3:30pm

# Liked by Stéphanie Walter 🦊 on Tuesday, April 10th, 2018 at 4:44pm

# Liked by Matt Slack on Tuesday, April 10th, 2018 at 4:45pm

# Liked by Charles Tatibouët on Tuesday, April 10th, 2018 at 4:45pm

# Liked by Andy Davies on Tuesday, April 10th, 2018 at 5:32pm

# Liked by Cédric Eberhardt on Tuesday, April 10th, 2018 at 6:45pm

# Liked by Joachim Fröstl on Tuesday, April 10th, 2018 at 7:55pm

# Liked by georg on Tuesday, April 10th, 2018 at 7:55pm

# Liked by Mickaël Isaert on Tuesday, April 10th, 2018 at 7:56pm

# Liked by Marc Friederich on Tuesday, April 10th, 2018 at 7:56pm

# Liked by Dan Rubin on Tuesday, April 10th, 2018 at 8:33pm

# Liked by Kmaschta on Tuesday, April 10th, 2018 at 8:33pm

# Liked by Martin Carlin on Tuesday, April 10th, 2018 at 10:50pm

# Liked by Mark on Wednesday, April 11th, 2018 at 12:36am

# Liked by Oliver Müller on Wednesday, April 11th, 2018 at 6:36am

# Liked by sun on Wednesday, April 11th, 2018 at 8:59pm

# Liked by Jonic Linley on Wednesday, April 11th, 2018 at 11:16pm

Have you published a response to this? :