Text-align: justify

Developer help
1

Is there a way to justify content on blog posts or do we need to hard code it on .post-full-content .CSS file?

2

Yes it’s possible, supposing you’ve got {{body_class}} included in your <body> tag in your default.hbs file as such: <body class="{{body_class}}">. If that’s in place, all you have to do is add .post-template before the content that you specifically want to adjust. You’d therefore have something like this:

.post-template p {
    text-align: justify;
}

You can place that in your global code injection or your theme, up to you.

For more info on other templates you can use, see here:

1 Like
3

You can also add the following to your {{ghost_head}} via the code injection menu in the ghost admin panel:

<style type="text/css">
.post-full-content
{
    text-align: justify;
}
</style>

Works perfectly for me.

4

I’ve added this code in the Site Header but it doesn’t work. Is there anything else I can do?

https://darkness.ghost.io/top-10-most-haunted-places-in-singapore/

5

@noelboyd.com:

<style>
.post-template {
    text-align: justify;
}
</style>
6

This worked! Thank you so much!!!

7

Thank you ! It also works for me but I would not like it to be applied to titles and excerpts. Is there a trick to only apply justify to main paragraphs ?

8

That’d depend on your theme, but try the code I left in my first comment up top.

9

Thank you !

Indeed with the code of your first comment the title is not justified anymore, which is good.
But the excerpt just below the title and above the content is justified, and I would like to avoid it.
My theme is «Journal», free theme in Ghost marketplace.

Would you have an idea of how I could avoid this excerpt to be justified ?

10

This should do it:

.post-template .gh-content p {
    text-align: justify;
}
11

indeed, it is working. thank you very much for your help.

12

@Stromfeldt I am sorry, I would also like to justify content from pages, with this code I only justify content from posts.
Would you know what I should add ?

13

Replicate the post portion but make it work for pages:

.post-template .gh-content p,
.page-template .gh-content p {
    text-align: justify;
}
1 Like
14

thank you very much it is perfectly working

15

one question though : would it be better to integrate this in theme code or in code injection ? could it affect speed load ?

16

I have no idea if it would affect speed load, but if it did it I imagine that it’d probably be so massively infinitesimal that you’d in effect lose something like 0.00000001 readers per month, less than you’d lose by not spell-checking your content.

Otherwise, if you already modify Journal for your personal usage then you might as well drop that code in. If not, then there’s probably no good reason lest you want to have to integrate updates into your modified theme as Journal gets updated every now and then (or to alternatively have to add those few lines back into Journal every time it gets updated).

1 Like
17

thank you very much for these precisions

18

Can you help me add multilingual content to my site, I have content in urdu language and also in english but the problem is the Urdu is written right to left so for it I need right Alignment and English is written left to right so for it I need Left Alignment Can you help me do something like that where the text of Urdu Page is Shown with Right Alignment and Everything else is in left alignment

19

The provided code, when pasted into code injection, will justify all content except for the title.

<style>
.post-template .gh-content p {
    text-align: justify;
}
.page-template .gh-content p {
    text-align: justify;
}
.tag-template .gh-content p {
    text-align: justify;
}
.author-template .gh-content p {
    text-align: justify;
}
</style>
20

Hi guys!

I used the code from this topic succesfullly, but have couple questions:

  • how do I keep justify alignment in lists? It reverts back to left alignment, which looks ugly for big text block for each bullet point.
  • can the title be left-adjusted, while excerpt is justified?
  • mostly important - how do i translate this style to newsletter? After implementing the code successfully on this site, my newsletter still looks as before.