Ishimoto: Can I justify text within Squarespace?

The theme I'm using (Ishimoto) doesn't offer the option to justify text. Is there an HTML or CSS code I can use to justify text within blocks? If so, how do I use it? This would really help me out. This question has been asked before but the wrong answer has been given each time. I am not asking for what works on other sites. I am asking for what works on SquareSpace hosted sites. Kudos for correct answers, not just responses in general.

Hi there,

The CSS to justify text is:

.element-to-justify {
 text-align: justify;
}

So using custom CSS you can target the element(s) you want to justify. If you post a link to your site and explain which part you want justified, I would be happy to give you the exact code.

I tried pasting the code into CSS in Style Editor mode and it gave me a syntax error message. How do I implement it?

There was an erroneous character in the code I posted, which i've now removed. Simply copying and pasting the code won't work for you though, as it is targeting an element that doesn't exist (.element-to-justify). You'll need to let me know which element you want to justify, and i'll give you the exact code to copy and paste. The easiest way to do this is give me a link to your site and explain which part you'd like justified.

Just one point from a designers/typography point of view. Justified text is plain awful unless you do it in print when you have full control over each line and it's word spacing. And also being able to overhang punctuation.

Because you get uneven spaces where lines of copy are forced to fit the width.

Basically it makes it uncomfortable to read. Similar to white type on black backgrounds.

My advice from a long career in design and a few typography awards is don't justify your text.

I have to say that although I provided an answer for how to do this, I don't necessarily agree that you should - i'm not a fan of justified text.

I want to justify text blocks. All text blocks on my site. My site is www.aperturestar.com

ApertureStar, try this code in the CSS editor:

body p, .sqs-layout .sqs-block.html-block p {
 text-align: justify !important;
}

I have been searching for a way to justify one single line of text for hours but didn't succeed. I would be the happiest dude on earth if you could also provide me with the code for my webside. The last row shows contact details. I want to justify this single row. here is the link: https://hans-schimpf.squarespace.com/home-1-1

Hi pleasehelp,

That line of text is actually justified as far as the CSS is concerned, so you've done nothing wrong :) CSS won't justify a single line of text, only multiple lines. You can see this in practice if you add some extra text to that block to make it wrap to two lines - see how it now justifies the first line?

Fortunately, there is a way to make CSS think that there is multiple lines, and using the following code should give you the effect you're after:

To justify text on just one page, add it in Style tags in the Page Header Code Injection like this:

<style>
body p, .sqs-layout .sqs-block.html-block p {
 text-align: justify !important;
}
</style>

Works great!

Hi all - I know this is an old thread but hopefully someone can help :)

Using Montauk, all my body text is under heading 3, and it seems the css I've tried from these boards has only actually worked with normal plain text. Is there something I can use to justify all my header 3 body text across all the pages?

Thanks1

Wait...ALL your body text is an H3?

Yes, its modified under h3, I figured out it was overriding the codes - ended up modifying the "normal" and it did work, but it kind of messed up the headers and I had to manually move them over. Not ideal but at least somewhat worked. I could not get justify + center though.

I am trying to double justify my text in heading 3 font. Here is my site I am working on. https://zack-streit-gncj.squarespace.com

I tried to use the codes before but it came back with an error. Can you somebody please help me.

Thank you

Did you get it to work. Mine is also in H3.

I found this thread a few months back, and the code you posted worked great! HOWEVER, I noticed that the formatting on the footer on some of my pages was messed up, and I couldn't figure out why. I realized that it was only occurring on pages that I had injected this code into. Is there a way to EXCLUDE the justification from being applied to the footer? I'm a relative novice when it comes to code, so if someone could provide the exact modification that I can copy and paste in where needed instead of the original code, I would be GREATLY APPRECIATIVE!

Update: I simply removed .sqs-layout .sqs-block.html-block p as well as !important; It works like a charm, and does exactly what I want it to do. Thank you!

Hi! Code to justify text is working great but is it possible to make the code affect only one text block and not other ones, for example quotes..?

Hi subpar, wondering if you would be able to assist with my site? Seem to be having the same issue in which I'd like certain sections to be justified. Thanks, Gaz

Hi @ApertureStar , I made a video tutorial for you on how to Justify Text in Squarespace. Hope this helps! https://www.askquesty.com/post/justify-text-squarespace-tutorial

Hello, I am facing a similar issue and would appreciate your input. I'm using the "Miller" template with the following CSS to justify all body content. The CSS used to work perfectly across all browsers, but recently, it works only on Chrome and NOT on Safari (i.e., the text is not justified when browsing from Safari for any newly edited text, except when view from Chrome). In other words, some of the text on Safari is still justified, but recently edited text is not:

body p { text-align: justify; text-justify: inter-word; }