|
1 | 1 | <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'> |
2 | 2 | <html lang="en"> |
3 | | -<!-- $Id: selector.src,v 2.73 2003-08-18 18:16:20 bbos Exp $ --> |
| 3 | +<!-- $Id: selector.src,v 2.74 2003-08-20 16:42:27 bbos Exp $ --> |
4 | 4 | <head> |
5 | 5 | <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
6 | 6 | <title>Selectors</title> |
@@ -1107,25 +1107,37 @@ is similar to a floated element.</p> |
1107 | 1107 | <a href="box.html#padding-properties">padding properties,</a> |
1108 | 1108 | <a href="box.html#border-properties">border properties,</a> |
1109 | 1109 | <a href="colors.html">color properties,</a> |
1110 | | -<a href="colors.html#background-properties">background properties,</a> |
1111 | | -and |
1112 | | -<span class="propinst-float">'float',</span> |
1113 | | -and, if 'float' is not 'none', |
1114 | | -<span class="propinst-width">'width',</span> |
1115 | | -<span class="propinst-min-width">'min-width',</span> |
1116 | | -<span class="propinst-max-width">'max-width',</span> |
1117 | | -<span class="propinst-height">'height',</span> |
1118 | | -<span class="propinst-min-height">'min-height',</span> |
1119 | | -<span class="propinst-max-height">'max-height',</span> |
1120 | | -and |
1121 | | -<span class="propinst-clear">'clear'</span>. |
| 1110 | +<a href="colors.html#background-properties">background properties.</a> |
1122 | 1111 | To allow UAs to render a typographically correct drop cap or initial |
1123 | 1112 | cap, the UA may choose a line-height, width and height based on the |
1124 | 1113 | shape of the letter, unlike for normal elements. CSS3 is expected to |
1125 | 1114 | have specific properties that apply to first-letter. |
1126 | 1115 | </p> |
1127 | 1116 |
|
1128 | | -<div class="html-example"><p></p> |
| 1117 | +<div class="html-example"> |
| 1118 | +<p>This example shows a possible rendering of an initial cap. Note |
| 1119 | +that the 'line-height' that is inherited by the first-letter |
| 1120 | +pseudo-element is 1.1, but the UA in this example has computed the |
| 1121 | +height of the first letter differently, so that it doesn't cause any |
| 1122 | +unnecessary space between the first two lines. Also note that the |
| 1123 | +fictional start tag of the first letter is inside the SPAN, and thus |
| 1124 | +the font weight of the first letter is normal, not bold as the SPAN: |
| 1125 | +<pre> |
| 1126 | +p { line-height: 1.1 } |
| 1127 | +p:first-line { font-size: 3em; font-weight: normal } |
| 1128 | +span { font-weight: bold } |
| 1129 | +... |
| 1130 | +<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br> |
| 1131 | +Erbarremt over my en mijn benaeuwde vesten<br> |
| 1132 | +En arme burgery, en op mijn volcx gebed<br> |
| 1133 | +En dagelix geschrey de bange stad ontzet. |
| 1134 | +</pre> |
| 1135 | +<div class="figure"> |
| 1136 | +<p><img src="./images/initial-cap.png" alt="Image illustrating the :first-letter pseudo-element"> |
| 1137 | +</div> |
| 1138 | +</div> |
| 1139 | + |
| 1140 | +<div class="html-example"> |
1129 | 1141 | <p>The following CSS 2.1 will make a drop cap initial letter span about two lines:</p> |
1130 | 1142 |
|
1131 | 1143 | <pre> |
@@ -1188,9 +1200,9 @@ first letter should be included."></p> |
1188 | 1200 |
|
1189 | 1201 | <p>The :first-letter pseudo-element can be used with all elements that |
1190 | 1202 | contain text, or that have a descendant in the same flow that contains |
1191 | | -text. <ins>A UA should act as if the fictional start tag of the |
| 1203 | +text. A UA should act as if the fictional start tag of the |
1192 | 1204 | first-letter pseudo-element is just before the first text of the |
1193 | | -element, even if that first text is in a descendant.</ins></p> |
| 1205 | +element, even if that first text is in a descendant.</p> |
1194 | 1206 |
|
1195 | 1207 | <div class=example> |
1196 | 1208 | <p>Here is an example. The fictional tag sequence for this HTML |
|
0 commit comments