The New Way To Justify Text In EverWeb!

EverWeb allows you to format text in a number of different ways. The Blog Post Editor and the Styled Text Editor that comes embedded in some of EverWeb’s widgets, such as the PayPal, FlexBox and Text Section widgets, have also introduced other text formatting options that are more flexible than ever. However, there is one text formatting option that the Blog Post Editor and Styled Text Editor have that’s not available in EverWeb’s Text Inspector: Justified text. The Text Inspector only has Left, Center and Right alignment options.

Why Is There No Justify Text Option?
Text justification originated with the printed book where it was a typesetter’s job to make sure that text looked right when printed. A typesetter could make small changes to letter spacing on a page to make it so that the page flowed properly. In essence, the goal was to make sure that the text looked even without large amounts of white space between words or letters. Secondly, when looking at a printed page, the goal was not to avoid lines of white space flowing down the page. Rivers of white space flowing down the page and uneven white space horizontally on the page, make for a very distracting experience for the reader.

Fast forward to the Internet Age. When transferring the typesetter’s skills in to computer algorithms, the initial result was quite poor and the result was often what was not desired: large blocks of white space, spaced out letters in words and rivers of white space running down the page. Algorithms also had no idea how to hyphenate words properly which just compounded the problem. Over the last couple of years CSS Styling has improved and even introduced a ‘newspaper format’ for justification which has helped to produce a more natural looking text flow on the page. It’s still not perfect, so hopefully things will improve in the future!

In the meantime, the demand for justified text, even if not yet perfect, in website design still exists, so how do you get text justified when not using the EverWeb’s Blog Post Editor or Styled Text Editor?

Two Solutions for Justified Text
There are basically two options available…

The first you can use is the free AAI Justify Text widget Justified Text In EverWeb – Free Widget from our site. The widget was developed back in 2016, so it’s only able to offer very basic functionality and may lack the flexibility that you need. So we would recommend the second option…

The second option takes just few instructions and can be applied directly to your pages. It’s also a more flexible option with fewer limitations than the widget. To be able to use the following instructions to justify text in EverWeb you’ll need to be using EverWeb version 2.9 or higher.

Justifying Text In EverWeb
The method described below for text justification uses just one line of code and EverWeb’s new CSS Class feature that debuted in EverWeb 2.9.

1. Start by double clicking on the name of your website in the Web Page List. The Site Publishing Settings will appear, replacing the usual Editor Window.
2. In the Header/Footer Code section, enter the following code in the Head Code box:
   .justify {text-align:justify !important;}

   Adding the code at this level will mean that it will be applied to the whole of your website, saving you from having to enter the code on a page by page basis.>

3. Next go to a page on which you have some text that you want justified. Select the TextBox containing the text to justify. If you want, you can select multiple TextBoxes at the same time.
4. Now go to the Inspector Window and select the Text Inspector.
5. Set the Text Alignment to ‘Left Aligned’ if it is not already set as such.
6. With the TextBox(es) still selected, go to the Shape Options tab.
7. EverWeb 2.9 introduced the ‘Advanced Options’ section at the bottom of the Shape Options tab. This is where you can enter CSS Class Names, so click on the left pointing arrow to expand the section.
8. In the CSS Class Field enter the word ‘justify’. Any TextBox you want justified must have this set. Remember as well that ‘justify’ is all lower case. No capitalization! You’ll also notice that you do not see the justification in the Editor Window.
9. To view the justification, either Preview or Publish your website.

Making Sure It Works!
Take care to follow the above instructions properly. Doing so will give you an easy way to justify text easily and with more flexibility than using widgets or other solutions.