C:\ Home » Blog » Code » Anti Auto-Hyphenation Hacks

Anti Auto-Hyphenation Hacks

Noticed the maybe annoyingly frequent hyphenations on the site lately?

Lines that go li-
ke this even when they re-
ally don't need to?

I didn't until I switched to Chrome! Apparently it's a browser-based feature. Neither FireFox nor Opera had it - Chromium-based though the latter may be too it's apparently not all that similar to Chrome after all.

I don't want this stuff though.

Lines aren't supposed to hyphenate themselves. I do that manually.
I add in shy hyphens into the code so certain words hyphenate at certain resolutions, and have been planning to revise old posts eventually with this in mind, to get them looking as good as possible.

Hyphens at the end of every line just look weird.

So, the solution? I found this:

article .entry-content {
	-moz-hyphens: none;
	-ms-hyphens: none;
	-webkit-hyphens: none;
	hyphens: none;
	word-wrap: normal;

I tried adding it in... nothing happened. It didn't work. I kept looking. I found this too. Good alternative, though no MS compatibility here:

.hyphenate {
  word-wrap: break-word;
  overflow-wrap: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

But that's not very different after all.

After digging around a little more I found this:

p {
     -webkit-hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
     -webkit-hyphenate-limit-chars: 6 3 3;
     -webkit-hyphenate-limit-lines: 2;
     -webkit-hyphenate-limit-last: always;
     -webkit-hyphenate-limit-zone: 8%;
     -moz-hyphens: auto;
     -moz-hyphenate-limit-chars: 6 3 3;
     -moz-hyphenate-limit-lines: 2;
     -moz-hyphenate-limit-last: always;
     -moz-hyphenate-limit-zone: 8%;
     -ms-hyphens: auto;
     -ms-hyphenate-limit-chars: 6 3 3;
     -ms-hyphenate-limit-lines: 2;
     -ms-hyphenate-limit-last: always;
     -ms-hyphenate-limit-zone: 8%;
     hyphens: auto;
     hyphenate-limit-chars: 6 3 3;
     hyphenate-limit-lines: 2;
     hyphenate-limit-last: always;
     hyphenate-limit-zone: 8%;

...and started questioning if my manual hyphenation approach was really necessary after all.

If you actually have total control over the character amount required for automatic hyphenation to occur, and on how many lines in a row this can occur, then this would pretty much be the same thing as doing it manually after all, except you don't actually have to. Potentially plenty of time saved at no extra cost! No downside.

I tried using this too though and that didn't work either! Did some digging through my stylesheet and noticed... I'd actually enabled auto hyphenation myself in the code further down, and just hadn't been using a browser earlier with which this code was compatible. -_-

So I removed that but... it's not going away anyway.

Some plugin-related stylesheet with this built-in? Some function I've forgotten about? Something built-in with WP itself? Something browser-based after all, that I just can't override?

For now I think I'll just give this a break, but it does seem like the manner of hyphenation changed slightly after I removed my own code.

It's not as frequent now. Doesn't happen with two letter cuts. The lowest I've seen so far is three.

So that's that. Override. Don't let browsers take control. Even if you want to go automatic: manual code's the way to go!

I'll look into this some more in the future; post a follow-up then.

When I can get these lines exactly where and how I wan-
t 'em.


Keep track of the discussion via rss? Read about comment etiquette? Or type in something below!
This was pretty damn interesting. And yet, nobody's spoken! Be the first!

The Comment Form

Your email address will not be published. Required fields are marked *

Your email is saved only to approve your future comments automatically (assuming you really are a human). ;) It's not visible or shared with anyone. You can read about how we handle your info here.

Question   Razz  Sad   Smile  Redface  Biggrin  Surprised  Eek   Confused   Cool  Mad   Twisted  Rolleyes   Wink  Idea  Neutral

Privacy   Copyright   Sitemap   Statistics   RSS Feed   Valid XHTML   Valid CSS   Standards

© 2021
Keeping the world since 2004.