[css-inline] move images to image folder

Author: dauwhe

css-inline/Overview.bs

@@ -249,7 +249,7 @@ Drop Initial</h4>
 A <dfn>dropped initial</dfn> (or “drop cap”) is a larger-than-usual letter at the start of a paragraph, with a baseline at least one line lower than the first baseline of the paragraph. The size of the drop initial is usually indicated by how many lines it occupies. Two- and three-line drop initials are very common.
 
 <figure>
-  <img alt="3-line drop cap with E Acute"  src="Dropcap-E-acute-3line.png" width="480">
+  <img alt="3-line drop cap with E Acute"  src="images/Dropcap-E-acute-3line.png" width="480">
   <p class="caption">Three-line drop initial with E acute. Since the cap-height of the drop initial aligns with the cap-height of the main text, the accent extends above the paragraph.</p>
 </figure>
 
@@ -258,19 +258,19 @@ The exact size and position of a <a>dropped initial</a> depends on the alignment
 
 
 <figure id="f2">
-  <img src="Dropcap-lines.png" width="600" alt="drop cap showing alignment"/>
+  <img src="images/Dropcap-lines.png" width="600" alt="drop cap showing alignment"/>
   <p class="caption">Two-line drop cap showing baselines (green lines), cap-height (red line), and ascender (cyan line).</p>
 </figure>
 
 The alignment constraints for drop initials depend on the writing system. In ideographic scripts, the initial letter extends from the <a>block-start</a> edge of the first line to the <a>block-end</a> edge of the Nth line.
 
 <figure>
-  <img src="Initial-2line-JapaneseVertical六.png" width="480" alt="Japanese Vertical Initial"/>
+  <img src="images/Initial-2line-JapaneseVertical六.png" width="480" alt="Japanese Vertical Initial"/>
   <p class="caption">Two-line drop initial in vertical writing mode</p>
 </figure>
 
 <figure>
-  <img src="CJK-Initial.001.png" width="480" alt="Diagram of Japanese initial letter in vertical writing mode"/>
+  <img src="images/CJK-Initial.001.png" width="480" alt="Diagram of Japanese initial letter in vertical writing mode"/>
   <p class="caption">Diagram of Japanese initial letter in vertical writing mode</p>
 </figure>
 
@@ -281,7 +281,7 @@ is the hanging baseline,
 and the bottom alignment point is the text-after-edge.
 
 <figure>
-  <img src="Devangari-Initial.png" width="480" alt="Devangari initial letter"/>
+  <img src="images/Devangari-Initial.png" width="480" alt="Devangari initial letter"/>
   <p class="caption">Devangari <a>initial letter</a> aligned with hanging baseline. Alignment points shown in red.</p>
 </figure>
 
@@ -292,7 +292,7 @@ Sunken Initial Letters</h4>
 Some styles of drop initials do not align with the first line of text. A <dfn>sunken initial</dfn> (or “sunken cap”) both sinks below the first baseline, and extends above the first line of text.
 
 <figure>
-  <img src="SunkenCapA.png" width="480" alt="sunken drop initial"/>
+  <img src="images/SunkenCapA.png" width="480" alt="sunken drop initial"/>
   <p class="caption">Sunken cap. The letter drops two lines, but is the size of a three-line initial letter.</p>
 </figure>
 
@@ -303,7 +303,7 @@ A <dfn>raised initial</dfn> (often called a “raised cap” or “stick-up cap
 
 
 <figure>
-<img src="RaisedCap.png" width="480" alt="raised cap"/>
+<img src="images/RaisedCap.png" width="480" alt="raised cap"/>
 <p class="caption">Raised cap. The initial letter is the size of a 3-line initial, but does not drop.</p>
 </figure>
 
@@ -367,17 +367,17 @@ and is not ''initial-letter/normal'': this triggers the special layout considera
     <dt>(''initial-letter: 3 3'')
     <dd>Represents a <a>dropped initial</a> 3 lines high, 3 lines deep.
 
-      <img src="InitialLetter33.png" alt="3 lines high, 3 lines deep" width="360"/>
+      <img src="images/InitialLetter33.png" alt="3 lines high, 3 lines deep" width="360"/>
 
     <dt>''initial-letter: 3 2''
     <dd>Represents a <a>sunken initial</a> 3 lines high, 2 lines deep.
 
-      <img src="InitialLetter32.png" alt="3 lines high, 2 lines deep" width="360"/>
+      <img src="images/InitialLetter32.png" alt="3 lines high, 2 lines deep" width="360"/>
 
     <dt>''initial-letter: 3 1''
     <dd>Represents a <a>raised initial</a> 3 lines high, 1 line deep.
 
-      <img src="InitialLetter31.png" alt="3 lines high, 1 line deep" width="360"/>
+      <img src="images/InitialLetter31.png" alt="3 lines high, 1 line deep" width="360"/>
   </dl>
 
 </div>
@@ -473,7 +473,7 @@ If an initial letter is too long to fit on one line, it wraps (according to the
 
 
 <figure>
-  <img alt="multi-line drop cap"  src="Multi-line-initial.png" width="300">
+  <img alt="multi-line drop cap"  src="images/Multi-line-initial.png" width="300">
   <p class="caption">Drop cap extends to two lines.</p>
 </figure>
 
@@ -493,7 +493,7 @@ Sizing Initial Letters</h3>
 
 
 <figure>
-<img src="InitialCapEquation.png" width="604" alt="Equation to calcuate drop initial font size"/>
+<img src="images/InitialCapEquation.png" width="604" alt="Equation to calcuate drop initial font size"/>
 </figure>
 
 <!--
@@ -534,7 +534,7 @@ Space Around Initial Letters</h3>
 The glyph(s) of an initial letter do not always fit within the specified sink. For example, if an initial letter has a descender, it could crash into the (n+1)th line of text. This is not desirable.
 
 <figure>
-<img alt="3-line drop cap with J, with descender crashing into fourth line of text"  src="Dropcap-J-3line-crash.png" width="480">
+<img alt="3-line drop cap with J, with descender crashing into fourth line of text"  src="images/Dropcap-J-3line-crash.png" width="480">
 <p class="caption">Incorrect: three-line initial letter with descender</p>
 </figure>
 
@@ -551,7 +551,7 @@ Specifically, for non-atomic initial letters, the content box of the element is
 The margin box of the initial letter is then made an exclusion area for subsequent text.
 
 <figure>
-<img alt="3-line drop cap with J, but four-line exclusion"  src="Dropcap-J-3line-exclude.png" width="480">
+<img alt="3-line drop cap with J, but four-line exclusion"  src="images/Dropcap-J-3line-exclude.png" width="480">
 <p class="caption">Correct: text excluded around glyph bounding box</p>
 </figure>
 
@@ -571,7 +571,7 @@ the UA should optically kern the first line of text into the <a>initial letter</
 as necessary to maintain perceptual continuity of the text.
 
 <figure>
-<img src="OpticalKerning.png" alt="optical kerning in the presence or absence of a space after the initial letter" width="200"/>
+<img src="images/OpticalKerning.png" alt="optical kerning in the presence or absence of a space after the initial letter" width="200"/>
 <p class="caption">In the top paragraph, the initial letter "A" has a word space after it. In the middle paragraph, the initial letter "A" is part of a word. In this case, the first line of text should be kerned into the initial letter's area as shown in the bottom paragraph.</p>
 </figure>
 
@@ -585,7 +585,7 @@ An initial letter does not affect the position of its containing element. For 
 
 
 <figure>
-<img src="initial-letter-drop-para-compare.png" alt="raised cap para after normal para" width="600"/>
+<img src="images/initial-letter-drop-para-compare.png" alt="raised cap para after normal para" width="600"/>
 <p class="caption">Raised cap (<code>initial-letter: 3 1</code>) on right; note that the position of the “C” is the same in both cases, but on the right all text is moved down relative to the initial letter.</p>
 </figure>
 
@@ -598,7 +598,7 @@ Short paragraphs with initial letters</h4>
 A paragraph with an initial letter can have fewer lines of text than the initial letter occupies. In this case, the initial letter’s top alignment is still honored, and its exclusion area continues into any subsequent blocks. This forces the subsequent inline-level content to wrap around the initial letter&mdash;exactly as if that block's text were part of its own containing block. (This is similar to how floats exclude content in subsequent block boxes.)
 
 <figure>
-<img src="initial-letter-short-para.png" alt="short para with initial letter" width="600"/>
+<img src="images/initial-letter-short-para.png" alt="short para with initial letter" width="600"/>
 <p class="caption">The red text is a short paragraph with an initial letter. Note the subsequent paragraph wraps around the initial letter just as text in the paragraph with the initial letter does.</p>
 </figure>
 
@@ -608,7 +608,7 @@ or specifies 'clear' in the initial letter’s containing block’s start direct
 then it must clear the previous block’s initial letter.
 
 <figure>
-  <img src="initial-letter-short-para-initial.png" alt="short para with initial letter followed by para with initial" width="600"/>
+  <img src="images/initial-letter-short-para-initial.png" alt="short para with initial letter followed by para with initial" width="600"/>
   <p class="caption">The red text is a short paragraph with an initial letter. The subsequent paragraph clears because it also has an initial letter.</p>
 </figure>