Hyphenate/justify posts

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

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.

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.

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

.book.e-content,.book.p-summary, #post-body {

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?

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