RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/text-justify below:

text-justify · WebPlatform Docs

text-justify Summary

The text-justify CSS property offers a fine level of justification control over the enclosed content, allowing for a variety of sophisticated justification models used in different language writing systems.

Overview table

Initial value: auto
Applies to: block containers and, optionally, inline elements
Inherited: Yes
Media: visual
Computed value: specified value
Animatable: No
CSS Object Model Property: textJustify

Syntax

text-justify: auto
text-justify: distribute
text-justify: inter-cluster
text-justify: inter-ideograph
text-justify: inter-word
text-justify: kashida
text-justify: none

Values

auto: Default. Allows the browser to determine which justification algorithm to apply.
none: Justification is disabled.
inter-word: Aligns text by increasing the space between words. This value’s spacing behavior is the fastest way to make all lines of text equal in length. Its justification behavior does not affect the last line of the paragraph. This value is typically used for languages that separate words using spaces, like English or Korean.
inter-ideograph: Justifies lines of ideographic text, and increases or decreases both inter-ideograph and inter-word spacing. This value is typically used for CJK languages.
inter-cluster: Justifies lines of text that contain no inter-word spacing. This value is typically used for Southeast Asian scripts such as Thai.
distribute: Aligns text by increasing the space between both of words and characters. This value is sometimes used in e.g. Japanese.
kashida: Justifies lines of text by elongating characters at chosen points. This form of justification is intended for Arabic script languages.

Examples

The first paragraph is using inter-word as a value of text-justify property, in English. The second one is using distribute in Japanese paragraph.

<p class="english">This is a simple paragraph with a altered text-justify value by inter-word.</p>

<p class="japanese">日本語では、どのように表示されるかを見てみましょう。日本語の場合にはdistributeが使用される場合があります。</p>

View live example

p {
    width: 300px;
    text-align: justify;
    text-align-last: justify;
}

p.english {
    text-justify: inter-word;
}

p.japanese {
    text-justify: distribute;
}

Related specifications

CSS Text Module Level 3: W3C Working Draft