Saturday, August 17, 2013

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.