Hyphenate/justify posts

Help Customization
,
1

Hi WriteFreely community! How I can hyphenate (justify) my WriteFreely posts? Browsers now support hyphenation natively. Is there a CSS repice? Thanks!

2

Hi @vvug! You can justify your WriteFreely posts through a CSS recipe. All you need to do is go into the Custom CSS of your WriteFreely blog and add the following:

#post-body {
    text-align: justify;
}

This will hyphenate (justify) your posts. Hope that helps and let us know if it works.

3

Thanks! It almost works. It works in Chrome when viewing a single post, but it doesn’t work in the blog’s homepage, and it doesn’t work in Firefox at all.

4

No worries! This will do the trick for the homepage and post view:

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

Firefox is what’s getting me though. It doesn’t work at all like you said. This might have to do with white-space or something similar. Maybe someone knows about this problem who could help?

5

As mentioned in WriteFreely issue #308, an additional CSS rule is needed for Firefox and Safari. Full comment copied here:

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;
}

And we do plan to improve the default stylesheets in Write.as / WriteFreely to make these kinds of customizations easier in the future.

1 Like