There is already a article on this blog for properties that were define prior to CSS 3, Text Properties.
hanging-punctuation
In typography hanging punctuation is used
for keeping the flow of the text for readers. It outdent’s the punctuation
marks such as “quotes”, bullets. You can read more about “
Hanging-punctuation”
in typography.
Following image shows the example of the
hanging punctuation.
In the above image it is left side shows the
outdented bullets. While on the right side of the image shows the bullets as
part of text.
The hanging punctuation effect can be achieved
by using CSS3’s “Hanging-punctuation”
Syntax:
hanging-punctuation: <value>
Following are the values that are used for
hanging-punctuation:
Value
|
Description
|
none
|
No punctuation marks are allowed
outside of the box.
|
first
|
Allows the hanging of punctuation
marks at start of first line of text in the box.
|
last
|
Allows the hanging of punctuation
marks at end of last line of text in the box.
|
allow-end
|
The punctuation mark is allowed to
hang outside at the end of all lines in box, but it’s optional. It may reside
in the box if the justification is defined
|
Force-end
|
The punctuation mark is forced outside
the box at end of all the lines.
|
The punctuation marks that are allowed to
hang are as follow:
Uni-Code
|
Character(Punctuation mark)
|
Name
|
U+002C
|
,
|
COMMA
|
U+002E
|
.
|
FULL STOP
|
U+060C
|
،
|
ARABIC COMMA
|
U+06D4
|
۔
|
ARABIC FULL STOP
|
U+3001
|
、
|
IDEOGRAPHIC COMMA
|
U+3002
|
。
|
IDEOGRAPHIC FULL STOP
|
U+FF0C
|
,
|
FULLWIDTH COMMA
|
U+FF0E
|
.
|
FULLWIDTH FULL STOP
|
U+FE50
|
﹐
|
SMALL COMMA
|
U+FE51
|
﹑
|
SMALL IDEOGRAPHIC COMMA
|
U+FE52
|
﹒
|
SMALL FULL STOP
|
U+FF61
|
。
|
HALFWIDTH IDEOGRAPHIC FULL STOP
|
U+FF64
|
、
|
HALFWIDTH IDEOGRAPHIC COMMA
|
Note: As this is an optional property most of the browsers do not support it.
text-justify
The text justification property aligns text, images equally in the given margin from both ends of the line. "text-justify" is used when text-align is set to justify. This property defines the method of justifying the text.
following are table contains the values for text-justify:
Value
|
Description
|
none
|
No justification is specified
|
auto
| The browser decides the justification for text
|
inter-word
|
Decides the justification between the words in text.
|
inter-ideograph
|
Decides the justification for the ideographical text. It is used to specify the justification between ideographical text and symbols.
|
inter-cluster
|
It decides the justification for the text which does not have any inter-spacing between the words. It specifically designed for Asian languages.
|
newsletter
|
Decides the justification between the words and lines as and when necessary.
|
disturbute
| It works as "newsletter" property, It is very useful for Asian languages.
|
kashida
|
Decides the justification by elongation the cursive text.
|
Syntax:
text-align: justify;
text-justify: none| auto| inter-word| inter-ideograph| inter-cluster| newsletter| disturbute| kashida
text-outline
This property is used to define the outline for the text. Following is the simple example of effect that should get generated by text-outline property
Syntax:
text-outline: <length> <length> <color>;
Value
|
Description
|
(First)<length>
| This defines the outlines thickness
|
(second)<length>
| This defines the blur radius for the blur effect of the outline
|
color
|
defines the color of the outline
|
Note: As this is an optional property most of the browsers do not support it.
text-wrap
This property defines the methods for wrapping the text in the box.
Syntax:
text-wrap: none | normal | suppressed | unrestricted ;
Value
|
Description
|
none
|
Text is not wrapped and if the text does not fix the box it overflows.
|
normal
| The lines are allowed to break at given breakpoints.
|
suppressed
|
Line breaking is suppressed within the element.The line breaks only if there is no valid break point in the text. If the line break is there it is done as with normal.
|
unrestricted
|
The line may break between the two words/characters.
|
word-break
This property specifies that the line can be broken between any two characters. Unlike the line breaks appear at white space or any punctuation mark.
Syntax:
word-break: normal | keep-all | loose | break-strict | break-all ;
Value
|
Description
|
normal
|
Breaks the lines according their own rules
|
keep-all
| The lines are allowed to break at given breakpoints, same as normal. This is normal for all non-CJK characters. Breaks are not allowed in CJK text
|
loose
|
Normal for non-CJK characters. But for CJK characters line breaks are less restrective.
|
break-all
|
The break all works normal for CJK characters. But for all the non-CJK character content the line may break arbitrarily.
|
break-strict
|
The break strict works normal for CJK characters. But if the CJK characters contain the non-CJK characters. It is specifically useful for Korean language.
|
This property is supported by all the major browser except for Opera.
Example:
Following example shows the of break-all value.
<div style="border: 1px dotted black; height: auto; width: 52px; word-break: break-all;">
This is simple text showing example of word-break property is used
</div>
This is simple text showing example of word-break property is used.