Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
elenners opened this issue May 3, 2020 · 4 comments
Closed

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

elenners opened this issue May 3, 2020 · 4 comments

Comments

@elenners
Copy link

@elenners elenners commented May 3, 2020

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
Copy link

@c-cesar c-cesar commented May 3, 2020

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
Copy link

@c-cesar c-cesar commented May 3, 2020

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.

@elenners
Copy link
Author

@elenners elenners commented May 3, 2020

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

@thebaer
Copy link
Member

@thebaer thebaer commented May 29, 2020

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!

@thebaer thebaer closed this May 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.