Alignment means adjusting the space between characters and aligning the width of the character string for each line .
Justifying with CSS aligns the beginning and end of the lines, which looks nice.
This is a technique often used in print media.
It is not common on the web, but it is possible with CSS, so I will introduce it.
It’s easy to express, so let’s learn while actually typing the code.
Table of contents
- use text-align
- use flexbox
- adjust with space
- Complete equal allocation is difficult on the web
- summary
use text-align
Even allocation can be easily achieved with only one line of CSS .
Write the following in the target text element.
HTML
CSS
p {
text-align:justify;
}Even allocation is possible with the above code.
If you don’t use even allocation, it will be as follows.
When specified, you can see that not only the left side but also the right side is all aligned.
However, only the last line is not aligned.
To align the last line, we need to add one more line of CSS.
CSS
p {
text-align:justify;
text-align-last:justify;
}Add “text-align-last:justify;” and it will look like the image below.
Even if the number of characters is small, the characters are aligned with other lines by increasing the space between them.
You can justify text not only within a single element, but across multiple elements.
HTML
<ul>
<li>/li>
<li>こ</li>
<li></li>
</ul>CSS
ul li {
text-align:justify;
text-align-last:justify;
}This way all li tags are justified.
However, “text-align-last: justify” may not work on IE and Edge depending on the version .
Add one more line to make sure it works.
CSS
p {
text-align:justify;
text-align-last:justify;
text-justify:inter-ideograph
}The above code will definitely work for browsers IE and Edge as well.
use flexbox
text-align-last doesn’t work on safari as well as IE and Edge .
If you want to do justification in safari, you have to use pretty brute force means.
First, in HTML, enclose each character with a span tag.
HTML
<ul>
<li><span>あ</span><span>い</span><span>う</span><span>え</span><span>お</span></li>
<li><span>か</span><span>き</span><span>く</span><span>け</span><span>こ</span></li>
<li><span>わ</span><span>お</span><span>ん</span></li>
</ul>Then, specify even allocation in the li tag with CSS.
CSS
li {
display: flex;
justify-content: space-between;
}This works equally well for any browser, but it’s a lot more work.
Since each character is separated, there is also a problem from an SEO point of view.
Avoid using it if it contains important language.
adjust with space
As mentioned above, it takes a lot of work and a complex source to do perfect justification in all browsers.
If it’s a short sentence, consider making it simpler with just HTML.
HTML
<ul>
<ul>The method is to put a space between the characters and align the right edge.
For short sentences that don’t contain important words, this method is much more efficient and has no disadvantages.
Complete equal allocation is difficult on the web
Basic justification is readily achievable with “text-aligh:justify”.
However, as mentioned above, it is quite difficult to make the last line compatible with all environments.
In fact, many sites do not evenly distribute.
If you are told that you want even allocation, it may be necessary to persuade you by telling the truth that it is difficult on the web.
If it is absolutely necessary, consider using an image only for that part .
summary
I explained about even allocation in CSS.
Did you understand that there is a reason why it is not used much on the web?
If you do use it, please understand that perfectly even allocation is difficult , and be careful not to make a mistake when using it.
