CSS 3 Text Properties

    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.