Lesson: lesson-complex-css

A complex CSS example with CSS positioning, fonts and some typography. Expected output:

_images/lesson-complex-css-expected.png

Source: http://v1.jontangerine.com/silo/css/complex-type-fix/

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
OK
Download
Antennahouse
OK
Download
Vivliostyle
OK
Download

Stylesheet

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
@import url("../styles/a4.css");

#type-wrap,
#type,
#type em,
#type strong,
#type i,
#type span{
    border:1px solid transparent;
    background:transparent;
}
#type em,
#type strong,
#type i,
#type span{
    padding:0.063em 0.25em; /* 8px y 32px x @144px f-size */
    position:absolute;
}

#type-wrap{
    height:12em;
    text-align:left;
    display:block;
    clear:both;
    border:1px solid #eee;
}
#type{
    font-size:8em;
    line-height:1em;
    font-weight:300;
    font-family:'times new roman',serif;
    letter-spacing:0;
    float:none;
    color:#000;
    margin:0;
    padding:0;
    position:relative;
}

/* Jon */

#type em{
    text-transform:lowercase;
    left:0;
    top:0;
    /* over-ride defaults */
    font-size:1em;
    line-height:1em;
    font-style:italic;
    margin:0;
    padding:0.063em 0.25em; /* 8px y 32px x @144px f-size */
}
#type em span{
    font-size:0.25em; /* 32px */
    font-style:normal;
    left:1.25em; /* 40px */
    top:1.75em; /* 56px */
}
#type em span span{
    font-size:1.5em;  /* 48px */
    font-style:italic;
    left:0.25em; /* 10px */
    top:0; /* 21px */
}

/* Tan */

#type i{
    font-size:1em; /* 128px */
    font-style:italic;
    font-weight:900;
    text-transform:lowercase;
    left:0.219em; /* 28px */
    top:-0.039em; /* 12px */
}
#type i span{
    font-size:0.25em; /* 32px */
    font-style:normal;
    font-weight:300;
    left:2em; /* 64px */
    top:-0.375em; /* 12px */
}
#type i span span{
    font-size:2em; /* 48px */
    font-style:italic;
    left:0.063em; /* 3px */
    top:0;
}

/* gerine */

#type strong{
    font-size:1em; /* 128px */
    font-weight:300;
    left:0.444em; /* 88px */
    top:0.188em; /* 24px */
}
#type strong span{
    font-size:0.5em; /* 64px */
    font-style:italic;
    left:1.063em; /* 36px */
    top:0.25em; /* 16px */
}
#type strong span span{
    font-size:0.75em; /* 48px */
    left:0.125em; /* 6px */
    top:-1em; /* 48px */
}
#type strong span span span{
    font-size:1.333em; /* 64px */
    font-weight:900;
    text-transform:lowercase;
    left:0.125em; /* 8px */
    top:0.189em; /* 12px */
}
#type strong span span span span{
    font-size:1.5em; /* 96px */
    font-weight:300;
    font-style:normal;
    left:0.063em; /* 6px */
    top:0.125em; /* 12px */
}
#type strong span span span span span{
    font-size:0.5em; /* 48px */
    text-transform:uppercase;
    font-style:italic;
    left:0;
    top:1.125em; /* 54px */
}
#type strong span span span span span span{
    font-size:2.667em;
    color:#fc0;
    left:0.125em; /* 16px */
    top:-0.375em; /* 48px */
}

/* note */

#type-wrap p{
    font-size:2.25em;
    line-height:0.75em;
    font-style:italic;
    text-transform:lowercase;
    color:#000;
    font-family: georgia,serif;
    margin:2em 0 0 8em;
}
#type-wrap p strong{
    font-size:0.611em;
    font-weight:300;
    display:block;
    padding-left:0.5em;
}

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>


        <div id="type-wrap">
            <h1 id="type"><em>J<span>o<span>n</span></span></em> <i>T<span>a<span>n</span></span></i><strong>g<span>e<span>r<span>i<span>n<span>e<span>.</span></span></span></span></span></span></strong></h1>
            <p><em>Pith &#38; pulp</em> <strong>&#8592; This is not an image, it's just a typographic folly.</strong></p>
        </div>

    </body>
</html>