How to Add CSS3 Text Effects
A CSS3 site can make use of new text effects, in addition to simple text decorations. Of course, the tradeoff is that you must know that the viewer has the required support.
A few text effects are part of the specification, but so far remain unsupported by any browser — these entries are marked as such. The following list describes the special text effects that you can create using CSS3.
hanging-punctuation (currently unsupported): Specifies whether punctuation can appear outside the start or end of a line of text when the text would otherwise need to be wrapped. Acceptable values are
none: The punctuation can’t appear outside the box.
first: Punctuation can appear outside the box on the first line.
last: Punctuation can appear on the outside of the box on the last line.
allow-end: Punctuation can appear outside the box on any line if the punctuation wouldn’t ordinarily fit after the text is justified.
force-end: Punctuation can appear outside the box on any line. If the line is justified, the browser will force the punctuation to land outside the box.
punctuation-trim (currently unsupported): Specifies whether punctuation is trimmed when it appears outside the start of the end of a line of text when the text would otherwise need to be wrapped. Acceptable values are
none: The punctuation isn’t trimmed.
first: Trim any hanging punctuation on the first line.
last: Trim any hanging punctuation on the last line.
allow-end: Trim the punctuation on any line where it wouldn’t fit after the line is justified.
adjacent: Trim some types of punctuation that appears at the beginning, middle, or end of a line when the punctuation appears next to a full-width character.
text-align-last (currently unsupported): Describes how to align the last line of text when the paragraph relies on a justified margin. Acceptable values are:
auto: Relies on the value of the text-align property.
start: Aligned to the start of the line, which depends on the direction the text is laid out (left-to-right or right-to-left).
end: Aligned to the end of the line, which depends on the direction the text is laid out (left-to-right or right-to-left).
left: Always aligned to the left side of the box (regardless of text direction).
right: Always aligned to the right side of the box (regardless of text direction).
center: Contents are centered within the text box.
justify: Context are justified within the text box.
text-emphasis (currently unsupported): Sets the text-emphasis-style and text-emphasis-color properties in a single call.
text-justify (Internet Explorer only): Determines the alignment and spacing of text that has been marked as justified (where the right and left side of the text are even, rather than jagged). Acceptable values are
auto: The browser determines the method in which text is justified.
inter-word: Word spacing is used to justify the text.
inter-ideograph: Symbol spacing is used to justify the text (spaces between words aren’t counted). This setting is normally used with the Double-Byte Character Sets (DBCS) used with languages that rely on characters other than those used by Roman-alphabet languages such as English.
inter-cluster: Only text that naturally lacks whitespace (such as material written in an Asian language) is justified.
distribute: Justification follows the model used by newspapers, except that the last line isn’t justified when working with East Asian languages such as Thai.
kashida: Justification is accomplished by elongating individual characters.
trim: Justification is accomplished by shortening the amount of whitespace between letters.
none: Disable any form of justification.
text-outline (currently unsupported): Creates an outline that follows the contours of the target character. The property supports three values:
thickness: The width of the outline.
blur: The radius of the outline.
color: The color used to create the outline.
text-overflow: Defines the action that will take place when the text overflows the box used to contain it. Acceptable values are
clip: Removes any extra text.
ellipsis: Displays an ellipsis to show there’s additional text.
String: Displays the specified string value to show there’s additional text.
text-shadow: Displays a shadow of the target characters at the same width as the target character. The positioning, strength, and color of the shadow are determined by the following properties:
h-shadow: Determines the horizontal positioning of the shadow.
v-shadow: Determines the vertical positioning of the shadow.
blur: Specifies the clarity of the shadow text. Using a value of 0 means that the shadow text has the same clarity as the original text.
color: Defines the color used to create the outline.
text-wrap (currently unsupported): Determines how text is wrapped within the containing box. Acceptable values are
none: The text overflows the containing box when it’s too long.
normal: Text is broken between words or other white space.
unrestricted: Text is broken between any two characters.
suppress: The browser can only break lines if there are no other valid places to break a line within the paragraph. The specification is unclear as to where the break will take place, but the assumption is that it will occur between words or in some other white space.
word-break (no Opera support): Determines how text is wrapped within a containing box when working with a non-CJK (Chinese-Japanese-Korean) language. Acceptable values are
normal: Break the text using the browser’s standard rules, which normally means between words or other white space.
break-all: Break the text between any two characters.
hyphenate: Break the text at natural hyphenation points, between words, or in some other white space.
word-wrap: Determines how text is broken and then wrapped to the next line in a containing box when working with a non-CJK language. Acceptable values are
normal: Break words using the browser’s standard rules, which normally means at natural hyphenation points.
break-word: Allow breaking of words that normally don’t allow breaking.