DEV Community

Christian Kaindl
Christian Kaindl

Posted on

Use hyphenation on Dev.to?

I think it would be cool to have articles use hyphenation, so their lines are more similar in length.

p {
  hyphens: auto;
}

This can be done with CSS today and has basic support from all major browsers. And hey, if a browser does not support it, it's fine, sentences will be displayed just fine. I guess that is the definition of progressive enhancement :)
With a simple @-rule it could be used together with text-align: justify! <-- This looks totally awesome and professional. #cutting-edge :)
Hyphenation documentation on MDN

Hyphenation example

I recently read an article where it was used and I was surprised this is already possible, so I think it would give a really nice experience to most people even though it is only a small addition ❤

What does everybody else think on this?

Discussion (6)

Collapse
codemouse92 profile image
Jason C. McDonald • Edited

Augh! Me as a typesetting enthusiast wants to say "yes, please, do this!" Me as a dyslexic reader says "no, please, don't!" (I have a much harder time reading around dashes - takes me a few seconds.)

I was not prepared for this inner conflict!

Collapse
christiankaindl profile image
Christian Kaindl Author

:D Yes that is true, and that was also my initial thought, that is could be a limitation for some people.

Another possibility would be to only use it on mobile. On narrow devices, line breaks are oftentimes awful, so hyphenation could help in this scenario.

Collapse
jballanc profile image
Joshua Ballanco

If it's just a single CSS property change, it seems like this would be fairly easy to implement as a user preference.

Collapse
alephnaught2tog profile image
Max Cerrina • Edited

Comparison...!

style comparison

Collapse
courier10pt profile image
Bob van Hoove

To me the one on the right looks more inviting. Just 1 opinion.

But hey I learned something CSS :) Thanks for writing.

Collapse
christiankaindl profile image
Christian Kaindl Author

Comparison on mobile...

Comparison between `hyphen: auto; text-align: justify;` and none