Justify your site!

24 may
2021

Categories: Techno

There are four different types of horizontal text alignment. To the right, to the left, centered and justified. A side alignment, which is ubiquitous on the web, is inconceivable in print. In printing, most of the pages consist of a margin-to-margin format. This way of organizing the text is called justification. Until recently, using justified text on a website was virtually impossible. Web browsers had problems with hyphenation, with justification to a given format, with multiple lines of text. With the advent of HTML 5 and the modernization of browsers, things changed. Today, mobile browsers can justify text, and some break text into syllables and move parts of a word correctly to a new line. The possibility of conditional execution of cascade styles allows eliminating the multi-collumn composition on small screens.

Justified text is easy to read, the eye comfortably wanders from the end of the line to the beginning of the next. Justification became fashionable in the days of scribes, before the invention of printing in Europe. Good scribes were able to use abbreviations and word breaks to organize the manuscript so that the right edge of the column was a fairly even line. The entire site looked "aesthetically pleasing". The first printers copied this fashion in new technology. Over the centuries, fashion has become established and we are used to arranging words in this way on a page of the paper.

After years of lack of choice, it is now possible to apply format justification in multimedia without any problems. Browsers through CSS even deal with the problem of single lines left at the end and at the beginning of a column. Of course, due to the permanent reflow of text on websites, from time to time there can be some not-so-good combination of divisions or widows and bastards that are difficult for the machine to arrange aesthetically. Well. You cannot have a forest, a sawmill, and a dog. However, I urge you to return to your roots with all my heart. For laying out text on the Internet justifying to the format. I do this on my website to show that it is possible.

Magical recipe for full justification is here:

section.noindent > p

{

text-indent: 0rem;

text-align: justify;

font-size: 1rem;

-webkit-hyphens: auto;

-webkit-hyphenate-limit-before: 3;

-webkit-hyphenate-limit-after: 3;

-webkit-hyphenate-limit-chars: 6 3 3;

-webkit-hyphenate-limit-lines: 2;

-webkit-hyphenate-limit-last: always;

-webkit-hyphenate-limit-zone: 12%;

-moz-hyphens: auto;

-moz-hyphenate-limit-chars: 6 3 3;

-moz-hyphenate-limit-lines: 2;

-moz-hyphenate-limit-last: always;

-moz-hyphenate-limit-zone: 12%;

-ms-hyphens: auto;

-ms-hyphenate-limit-chars: 6 3 3;

-ms-hyphenate-limit-lines: 2;

-ms-hyphenate-limit-last: always;

-ms-hyphenate-limit-zone: 12%;

hyphens: auto;

hyphenate-limit-chars: 6 3 3;

hyphenate-limit-lines: 2;

hyphenate-limit-last: always;

hyphenate-limit-zone: 12%;

column-width: 400px;

-webkit-column-count: 2; /* Chrome, Safari, Opera */

-moz-column-count: 2; /* Firefox */

column-count: 2;

margin-bottom: 0rem;

widows: 3;

orphans: 3;

line-height: 1.5rem;

}

@media (max-width: 500px) {

.just {

-webkit-column-count: 1; /* Chrome, Safari, Opera */

-moz-column-count: 1; /* Firefox */

column-count: 1;

}

}

Return to index