FileNav

online
online: /HTML & CSS/CSS_Typography.md

CSS Typography

CSS Typography Browser Support

Comparison of layout engines (web typography)

Font Format Android Chrome Chrome FA FF FF FA IE IE Mobile iOS Opera Opera Mini Opera Mobile Safari Notes
WOFF2 ? ? ? ? ? ? ? ? ? ‐ ? ? Web Open Font Format 2
WOFF 4.4 5.0 all 3.6 all 9.0 10.0 5.0 11.1 ‐ 11.0 5.1 Web Open Font Format
TTF/OTF 2.2 4.0 all 3.5 all 9.0~ ? 4.2 10.0 ‐ 10.0 3.1 TrueType and OpenType Font
SVG fonts 3.0 4.0 all ‐ ‐ ‐ ‐ 3.2 9.0 ‐ 10.0 3.2 SVG with embedded fonts
EOT ‐ ‐ ‐ ‐ ‐ 5.5 all? ‐ ‐ ‐ ‐ ‐ Embeded-OpenType
Font Format Konqueror WebKit Notes
WOFF2 ? ? ?
WOFF 4.4.1 528 Web Open Font Format
TTF/OTF ? ‐ TrueType and OpenType Font
SVG fonts ? ‐ SVG with embedded fonts
EOT ‐ ‐ Embeded-OpenType
Feature Chrome FF (Gecko) IE Opera Safari
-moz-tab-size ‐ 4.0 (2.0) ‐ ‐ ‐
-o-tab-size ‐ ‐ ‐ 10.6 ‐
tab-size 21 ‐ ‐ 15.0 6.1
Feature Android BB Chrome FA FF (Gecko) FA IE Mobile iOS Safari Opera Mobile Opera Mini
-moz-tab-size ‐ ‐ ‐ 4.0 (2.0) ‐ ‐ ‐ ‐
-o-tab-size ‐ ‐ ‐ ‐ ‐ ‐ 10.6 ‐
tab-size 4.4 7.0 21 ‐ ‐ 6.1 15.0 ‐
Feature CSS Gecko KHTML Presto Prince Trident Webkit Notes
text-align 2 1.0 all 1.0 all 4.0 85 ‐
text-combine 3 ? ? ? ? ? ? No support as of 2011-07
-ms-text-combine-horizontal 3 ‐ ‐ ‐ ‐ 11 ‐ ‐
text-decoration 2 1.0 * all 1.0 3.1 all 85 * See bellow
text-indent 2 1.0 all 1.0 all 3.0 85 ‐
text-transform 2 1.0 all 1.0 6.0 4.0 85 ‐
text-overflow: ellipsis 3 ? ? ? ? ? ? ‐ 
.title {
    overflow: hidden;
    -o-text-overflow: ellipsis; /* Opera 9 & 10, Opera Mini 5 - 7 */
    text-overflow: ellipsis; /* Chrome 1+, FF 7+, IE 6+, Opera 11+, Safari 1.3+ */
    white-space: nowrap;
    width: 100%;
}

text-decoration Notes

Gecko: 1.0 Incorrect
WebKit: 85 Incorrect

Text Direction

Feature CSS Gecko KHTML Presto Prince Trident Webkit Notes
direction 2 1.0 all 1.0 7.0 5.0 85 ‐
unicode-bidi 2 1.0 all 1.0 7.0 5.0 525 ‐
-ms-writing-mode 3 ‐ ‐ ‐ ‐ 7.0 ‐ lr-tb, rl-tb, rl-tb, bt-rl
-ms-writing-mode 3 ‐ ‐ ‐ ‐ 8.0 ‐ tb-lr, bt-lr, lr-bt, rl-bt
-ms-writing-mode 3 ‐ ‐ ‐ ‐ 9.0 ‐ lr, rl, tb
writing-mode 3 ? ? ? ? 7.0, 9.0+ ? ?

Word Hyphenation

https://developer.mozilla.org/en/CSS/hyphens W3C: CSS3 Text: hyphens W3C: CSS 3 Generated content: hyphens

p.none {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
p.manual {
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}
p.auto {
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

Browser Basic Support (none | manual)

Value Chrome Firefox (Gecko) IE Opera Safari
none ? 6.0 (6.0) -moz 10.0 -ms ? 5.1
manual ? 6.0 (6.0) -moz 10.0 -ms ? 5.1
Value Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
none ? 6.0 (6.0) -moz ? ? ?
manual ? 6.0 (6.0) -moz ? ? ?

Browser auto Support with Language Hyphenation Dictionary

Language Firefox IE
af, bg, cy, eo, et, fi, hsb, is, ia, kmr, la, lt, mn, sh, sl 8.0 -
ca, da, de-1996, es, fr, nb, nl, nn, pt, ru, sv 8.0 10.0
Czech, Polish, Portuguese (Brazilian) - 10.0
en ?? 10.0
en-US 6.0 10.0
gl, hu, uk 9.0 -
de-1901 8.0 ??
it, tr 9.0 10.0

Links

Font Feature Settings via OpenType Feature Tags

Font Feature Tag Options Notes
smcp 0 or 1 Small Caps
c2sc 0 or 1 Any case (and punctuation) to Small Caps
hist 0 or 1 Enable or disable historical forms
liga 0 or 1 Enable or disable common ligatures. Default is 1.
tnum 0 or 1 Enable or disable tabular (monospaced) figures
frac 0 or 1 Enable or disable automatic fractions
swsh index Ex: 2 would mean use the 2nd available swash character.
ss07 0 or 1 Enable or disable stylistic set 7. Currently only on Win7. 
/* Small Caps with Stylesets 7 through 10 with auto fractions and no common ligatures */
.fancy-caps{
    -webkit-font-feature-settings: c2sc, frac, liga 0, smcp, ss07-ss10;/* Chrome 16 Windows */
    -moz-font-feature-settings: "c2sc=1, frac=1, liga=0, smcp=1, ss07=1, ss08=1, ss09=1, ss10=1";/* Firefox 4.0, Gecko 2.0 */
    -ms-font-feature-settings: "c2sc", "frac", "liga" 0, "smcp", "ss07-ss10";/* IE 10 */
    -o-font-feature-settings: "c2sc", "frac", "liga" 0, "smcp", "ss07-ss10";/* Not supported as of 2012-02-07? */
    font-feature-settings: "c2sc", "frac", "liga" 0, "smcp", "ss07-ss10";
}

WebFont Resources

font-weight Number Values

Weight Common English References
100 Thin, Hairline, Ultra-light, Extra-light
200 Light
300 Book
400 Regular, Normal, Plain, Roman, Standard
500 Medium
600 Semi-bold, Demi-bold
700 Bold
800 Heavy, Black, Extra-bold
900 Ultra-black, Extra-black, Ultra-bold, Heavy-black, Fat, Poster

tab-size

.code {
    -moz-tab-size: 4;/* FF 4.0 (Gecko 2.0) */
    -o-tab-size: 4;/* Opera 10.60 */
    tab-size: 4;/* Chrome 21 */
        /*
            <integer> (spaces) | <length> | inherit
            <length> is not part of the basic support and is unsupported as of 2014-01.
         */
}

Fixing Italics with Uniform Oblique

http://www.useragentman.com/blog/2010/09/07/giving-challenged-font-face-fonts-the-italics-makeover/

#content h1 em{
    font-family: "Graublau Web Bold", Arial, sans-serif;
    font-style: normal;

    -moz-transform:skewX(-10deg);
    -o-transform:skewX(-10deg);
    -webkit-transform:skewX(-10deg);
    transform:skewX(-10deg);

    display:inline-block;/* WebKit and Presto rendering engines won't transform inline elements */
}

.ie8 #content h1 em{
    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";
}
.ie7 #content h1 em,
.ie6  #content h1 em{
    filter:progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand');
}

@font-face

Note: Legacy iOS (original iPad, etc.) does not support having one family with multiple entries.
Such as for italic and bold versions. So each style must have it’s own font-family.
iOS Fonts
iOS 5 Fonts

/**
 * @see http://www.microsoft.com/typography/WEFT.mspx for creating EOT font objects.
 */
@font-face {
    font-family:"SexyFont";
    font-style:normal;/* Required by WebKit to allow font-style:italic oblique transforms */
    src:url("SexyFont.eot");
    src:local("SexyFont"), url("SexyFont.otf") format("opentype");
}

/**
 * @see http://readableweb.com/new-font-face-syntax-simpler-easier/
 * @see http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
 * @see http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
 * @see http://readableweb.com/mo-bulletproofer-font-face-css-syntax/
 * @see http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions
 * @see http://www.w3.org/TR/css3-fonts/
 */
@font-face {
    font-family:"SexyFont";
    font-family:"SexyFont";
    font-style:normal;/* Required by WebKit to allow font-style:italic oblique transforms */
    src:local("SexyFont");
    src:url("SexyFont.eot");/* IE9 Compatibility Modes */
    src:url("SexyFont.eot?iefix") format("embedded-opentype"),/* IE6 – IE8 */
        url("SexyFont.woff") format("woff"),/* Modern Browsers: IE9, FF 3.5, Chrome */
        url("SexyFont.ttf") format("truetype"),/* Safari, Android, iOS */
        url("SexyFont.svg#svgFontName") format("svg");/* Legacy iOS */
}

CSS 3 Font & Text Options

html, html a {
    -webkit-font-smoothing: antialiased;/* none | subpixel-antialiased (default) | antialiased */
    -moz-osx-font-smoothing: grayscale;

    -webkit-text-stroke: 0;

    -webkit-text-shadow:
    text-shadow: 1px 1px 3px #888; /* Chrome 2, FF 3.5, IE 10, Opera 9.5, Safari 1+ */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);/*
        [for rgba] Chrome, FF 2.0, IE 9, Opera 9.5, Safari 3.1,
        Android 2.1, BB 7.0, Chrome FA 31, FF FA 25.0, IE Mobile 10.0, iOS 3.2, Opera Mini 5, Opera Mobile 10
    */
}
/* The following is my idea. Not tested. */
html.lt-ie10, html.lt-ie10 a {
    -ms-filter: 'progid:DXImageTransform.Microsoft.Shadow(Color=gray, Direction=135, Strength=0, Enabled=true)';/* IE 8, 9 */
    /* -or- */
    -ms-filter: 'progid:DXImageTransform.Microsoft.DropShadow(OffX=0, OffY=0, Color=gray, Positive=true)';/* IE 8, 9 */
}
html.lt-ie8, html.lt-ie8 a {
    filter: 'progid:DXImageTransform.Microsoft.Shadow(Color=gray, Direction=135, Strength=0, Enabled=true)';/* IE 5.5+ */;
    /* -or- */
    filter: 'progid:DXImageTransform.Microsoft.DropShadow(OffX=0, OffY=0, Color=gray, Positive=true)';/* IE 5.5+ */;
}

Generic Font Families

sans-serif
serif
monospace
cursive
fantasy
Feature Chrome FF (Gecko) IE Opera Safari (WebKit) Konqueror (KHTML)
text-shadow 2.0.158.0 3.5 (1.9.1) 10 9.5 1.1 (100) 3.4
Multiple Shadows 2.0.158.0? 3.5 (1.9.1)? 10? 9.5 4 3.4?

Layout Engine HTML & XML Font Support

Format Trident Gecko WebKit Presto
CSS2 @font-face <3.1 ^[IE 4]^ 1.9.1 525 2.2
CSS3 font-family <3.1 ^[IE 4]^ 1.9.1 525 2.2
CSS3 src Partial 1.9.1 525 2.2
CSS2 font-style <3.1 ^[IE 4]^ 1.9.1 525 2.2
CSS2 font-weight <3.1 ^[IE 4]^ 1.9.2 533 2.7
CSS3 font-stretch 5.0 No No No
CSS3 unicode-range 5.0 No Partial No
CSS3 font-variant No No No No
CSS3 font-feature-settings
-moz-font-feature-settings: 'smcp=1';/* small-caps */		 No Experimental No No

Font Attributes

text-align – CSS 2

Trident: 4.0
Gecko: 1.0
WebKit: 85
KHTML: All
Presto: 1.0
Prince XML: All

text-decoration – CSS 2

Trident: All
Gecko: 1.0
WebKit: 85
KHTML: All
Presto: 1.0
Prince XML: 3.1

Gecko: 1.0 Incorrect
WebKit: 85 Incorrect

text-indent – CSS 2

Trident: 3.0
Gecko: 1.0
WebKit: 85
KHTML: All
Presto: 1.0
Prince XML: All

text-transform – CSS 2

Trident: 4.0
Gecko: 1.0
WebKit: 85
KHTML: All
Presto: 1.0
Prince XML: 6.0

Text Direction

direction – CSS 2

Trident: 5.0
Gecko: 1.0
WebKit: 85
KHTML: All
Presto: 1.0
Prince XML: 7.0

unicode-bidi – CSS 2

Trident: 5.0
Gecko: 1.0
WebKit: 525
KHTML: All
Presto: 1.0
Prince XML: 7.0

text-combine – CSS 3

No support as of: 2011-07?

text-overflow: ellipsis

@charset "utf-8"

.oneline-ellipsis{
    -o-text-overflow: ellipsis;/* Opera 9.0, Opera Mini 5.0 – 7.0, Opera Mobile 10.0 */
    text-overflow: ellipsis;/* Chrome 4.0, FF 7.0, IE 6, Opera 10.60, Safari 3.1
        Android 2.1, Chrome FA all, FF FA 26, IE Mobile 10, iOS 3.2, Opera Mobile 12.1 */
    overflow: hidden;
    white-space: nowrap;/* nowrap || pre */
}

.ellips-box-advanced{
    display: -webkit-box;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis-lastline;
    overflow: hidden;
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
}

::root{
    var-line-height: 1.4em;
}

.ellips-box-hack{
    position: relative;
    line-height: var(line-height);
    height: calc(var(line-height) * 3)/* to show 3 lines */
}
.ellips-box-hack:after{
    content: "…";/* &hellip; &vellip; &#x22EF; &#x22F0; &#x22F1; &#xFE19; */
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 1px 45px;
    background: url(ellipsis_bg.png) repeat-y;
}

writing-mode – CSS 3

-ms-writing-mode Attribute | writingMode Property | Writing Modes

*{
    writing-mode:lr-tb; /* IE 7 (MS CSS Extension), 9 (CSS 3) */
    -ms-writing-mode:lr-tb; /* IE 8 Standards Mode (MS CSS Extension) */
}

Subscript / Superscript

.ie sup {
    vertical-align: text-top;
}
.ie sub {
    vertical-align:text-bottom;
}

/* normalize.css */
sub,
sup {
    font-size: 75%;
    line-height: 0;
}

sup {
    top: -0.5em;
}

/* xml-html.css */
sup {
    vertical-align: super;
    font-size: smaller;
}

Word Hyphenation

https://developer.mozilla.org/en/CSS/hyphens W3C: CSS3 Text: hyphens W3C: CSS 3 Generated content: hyphens

p.none{
    -moz-hyphens:none;
    -ms-hyphens:none;
    -webkit-hyphens:none;
    hyphens:none;
}
p.manual{
    -moz-hyphens:manual;
    -ms-hyphens:manual;
    -webkit-hyphens:manual;
    hyphens:manual;
}
p.auto{
    -moz-hyphens:auto;
    -ms-hyphens:auto;
    -webkit-hyphens:auto;
    hyphens:auto;
}

Browser Basic Support (none | manual)

Value Chrome Firefox (Gecko) IE Opera Safari
none ? 6.0 (6.0) -moz 10.0 -ms ? 5.1
manual ? 6.0 (6.0) -moz 10.0 -ms ? 5.1
Value Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
none ? 6.0 (6.0) -moz ? ? ?
manual ? 6.0 (6.0) -moz ? ? ?

Browser auto Support with Language Hyphenation Dictionary

Language Firefox IE
af, bg, cy, eo, et, fi, hsb, is, ia, kmr, la, lt, mn, sh, sl 8.0 -
ca, da, de-1996, es, fr, nb, nl, nn, pt, ru, sv 8.0 10.0
Czech, Polish, Portuguese (Brazilian) - 10.0
en ?? 10.0
en-US 6.0 10.0
gl, hu, uk 9.0 -
de-1901 8.0 ??
it, tr 9.0 10.0