text-align: justify; in CSS does not work properly

[witchy-one]

Describe the bug

See this forum post: https://discuss.write.as/t/hyphenate-justify-posts/890
As noted there it works in Chrome, it does not work at all in Firefox nor Safari

Steps to reproduce (if necessary)

Steps to reproduce the behavior:

1. Add the following to your custom CSS:
   .book.e-content, .book.p-summary, #post-body, .e-content, div, #collection article p, #post article p, #subpage article p {
   text-align: justify;
   }
2. View blog in Firefox or Safari

Expected behavior

Post text should be justify-aligned

Application configuration

• Single mode or Multi-user mode?
  Single

• Database? [mysql/sqlite]
  Not sure - installed via Yunohost

• Open registration? [yes/no]
  No

• Federation enabled? [yes/no]
  Yes

Version or last commit:
0.12.0

[c-cesar]

This is strange, as this property is behind a flag on Chome, but activated on Firefox.

https://caniuse.com/#feat=css-text-justify

[c-cesar]

Try removing p tags. text-align must not be used on p tags, but on it's container.

.book.e-content, .book.p-summary, #post-body, .e-content, {
    text-align: justify;
}

P.S.: Your snippet applies it on all div container too.

[witchy-one]

No dice, unfortunately. No change on the main page or post pages in either browser.

[thebaer]

After finding this issue, it looks like the way to fix this in Firefox (and possibly Safari) is to include this rule:

white-space: normal;

Important! this removes the ability to insert single linebreaks in your posts.

---

Here's a starter stylesheet you can use to justify text, with this fix included. It may not be comprehensive, but it adjusts for special elements like lists:

body#post article *, body#collection article * {
    text-align: justify;
    white-space: normal !important;
}
body#post article ol, body#post article ul, body#collection article ol, body#collection article ul {
    margin: 2rem 0 2rem;
}
body#post article li, body#collection article li {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

We plan to improve the default stylesheets in WriteFreely to make these kinds of customizations easier in the future. But for now, I'll close this issue since it isn't a bug with the application.

Please feel free to continue this discussion on that forum post!