[css-break] Changing SVG illustrations to use px instead of em sizes

atanassov · atanassov · commit f180abc9a104 · 2015-07-24T14:04:19.000-07:00
Addressing yet another problem with the svg illustrations in css
fragmentation - some impls not being able to handle em's correctly.
diff --git a/css-break/images/Remaining-Fragmentainer-Extent.svg b/css-break/images/Remaining-Fragmentainer-Extent.svg
@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
   width="100%" height="100%" viewBox="0 0 540 225">
-  <title>Remaining Fragmentainer Extent</title>
+  <title>Remaining Fragmentainer Extent</title>  
 
   <style type="text/css">
     .page {
@@ -32,7 +32,7 @@
     .space-marker {
       fill: yellow;
       opacity: 0.5;
-    }
+    }  
 
     .pointer {
       fill: maroon;
@@ -54,15 +54,15 @@
     <g transform="translate(0,0)">
       <path d="M0,0 H180 V205 H0 Z" class="page"/>
       <g class="lorem" transform="translate(5,5)">
-        <rect x="0" y="0" width="5.5em" height="0.8em" />  <rect x="5.8em" y="0" width="4.7em" height="0.8em" />
-        <rect x="0" y="1.05em" width="2.5em" height="0.8em" /> <rect x="2.8em" y="1.05em" width="2.2em" height="0.8em" /> <rect x="5.3em" y="1.05em" width="4.2em" height="0.8em" />
-        <rect x="0" y="2.1em" width="1.5em" height="0.8em" /> <rect x="1.8em" y="2.1em" width="6.4em" height="0.8em" /> <rect x="8.5em" y="2.1em" width="1.5em" height="0.8em" />
-        <rect x="0" y="3.15em" width="4em" height="0.8em" /> <rect x="4.3em" y="3.15em" width="5.33em" height="0.8em" />
-        <rect x="0" y="4.2em" width="7.2em" height="0.8em" /> <rect x="7.5em" y="4.2em" width="2em" height="0.8em" />
+        <rect x="0" y="0" width="88" height="12.8" />  <rect x="92.8" y="0" width="75.2" height="12.8" />  
+        <rect x="0" y="16.8" width="40" height="12.8" /> <rect x="44.8" y="16.8" width="35.2" height="12.8" /> <rect x="84.8" y="16.8" width="67.2" height="12.8" />
+        <rect x="0" y="33.6" width="24" height="12.8" /> <rect x="28.8" y="33.6" width="102.4" height="12.8" /> <rect x="136" y="33.6" width="24" height="12.8" />
+        <rect x="0" y="50.4" width="64" height="12.8" /> <rect x="68.8" y="50.4" width="85.25" height="12.8" />
+        <rect x="0" y="67.2" width="115.2" height="12.8" /> <rect x="120" y="67.2" width="32" height="12.8" />
       </g>
       <g class="fragmentainer" transform="translate(5,10)">
         <path d="M0,190 V80 H170 V190"/>
-        <text x="5" y="100">this box<tspan x="5" dy="1.25em">is fragmented </tspan></text>
+        <text x="5" y="100">this box<tspan x="5" dy="20">is fragmented </tspan></text>
       </g>
     </g>
   </g>
@@ -71,34 +71,31 @@
     <g transform="translate(0,0)">
       <path d="M0,0 H180 V205 H0 Z" class="page"/>
       <g class="lorem" transform="translate(5,5)">
-        <rect x="0" y="0" width="7em" height="0.8em" /> <rect x="7.3em" y="0" width="3em" height="0.8em" />
-        <rect x="0" y="1.05em" width="4em" height="0.8em" /> <rect x="4.3em" y="1.05em" width="5.8em" height="0.8em" />
-        <rect x="0" y="2.1em" width="4.5em" height="0.8em" /> <rect x="4.8em" y="2.1em" width="5.8em" height="0.8em" />
-        <rect x="0" y="3.15em" width="2em" height="0.8em" /> <rect x="2.3em" y="3.15em" width="3.9em" height="0.8em" /> <rect x="6.5em" y="3.15em" width="4.13em" height="0.8em" />
-        <rect x="0" y="4.2em" width="1.5em" height="0.8em" /> <rect x="1.8em" y="4.2em" width="7em" height="0.8em" />
+        <rect x="0" y="0" width="112" height="12.8" /> <rect x="116.8" y="0" width="48" height="12.8" /> 
+        <rect x="0" y="16.8" width="64" height="12.8" /> <rect x="68.8" y="16.8" width="92.8" height="12.8" />
+        <rect x="0" y="33.6" width="72" height="12.8" /> <rect x="76.8" y="33.6" width="92.8" height="12.8" />
+        <rect x="0" y="50.4" width="32" height="12.8" /> <rect x="36.8" y="50.4" width="62.4" height="12.8" /> <rect x="104" y="50.4" width="66.08" height="12.8" />
+        <rect x="0" y="67.2" width="24" height="12.8" /> <rect x="28.8" y="67.2" width="112" height="12.8" />
       </g>
       <g class="fragmentainer" transform="translate(5,10)">
         <path d="M0,190 V80 H170 V190 Z"/>
-        <text x="5" y="100">this box<tspan x="5" dy="1.25em">is fragmented </tspan></text>
+        <text x="5" y="100">this box<tspan x="5" dy="20">is fragmented </tspan></text>
       </g>
     </g>
 
     <g>
       <circle class="pointer" cx="150" cy="115" r="5" />
-      <line class="pointer" x1="150" y1="115" x2="185" y2="115" />
+      <line class="pointer" x1="150" y1="115" x2="185" y2="115" /> 
       <text x="190" y="120">auto-height block</text>
     </g>
 
     <g transform="translate(0,135)">
+      <rect class="space-marker" x="0" y="0" width="280" height="70"/>
       <text y="0">
         <tspan x="190" dy="20">remaining </tspan>
-        <tspan x="190" dy="1.25em">blank </tspan>
-        <tspan x="190" dy="1.25em">space </tspan>
+        <tspan x="190" dy="20">blank </tspan>
+        <tspan x="190" dy="20">space </tspan>
       </text>
     </g>
   </g>
-
-      <g transform="translate(10,145)">
-        <rect class="space-marker" x="0" y="0" width="480" height="70"/>
-      </g>
 </svg>
diff --git a/css-break/images/Varying-Size-Fragmentainers.svg b/css-break/images/Varying-Size-Fragmentainers.svg
@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   width="100%" height="100%" viewBox="0 0 340 520">
-  <title>Variable-Size Fragmentainers</title>  
+  <title>Variable-Size Fragmentainers</title>
 
   <style type="text/css">
     .page {
@@ -58,24 +58,24 @@
       <path d="M0,0 H320 V190 H0 Z" class="page"/>
       <g class="float left" transform="translate(5,5)">
         <path d="M0,180 V0 H100 V180"/>
-        <text x="50" y="50">left <tspan x="50" dy="1.25em">float </tspan></text>
+        <text x="50" y="50">left <tspan x="50" dy="20">float </tspan></text>
       </g>
       <g class="lorem" transform="translate(110,5)">
-        <rect x="0" y="0" width="6.3em" height="0.8em" /> 
-        <rect x="0" y="1.05em" width="2.5em" height="0.8em" /> <rect x="2.8em" y="1.05em" width="2.2em" height="0.8em" />
-        <rect x="0" y="2.1em" width="1.5em" height="0.8em" /> <rect x="1.8em" y="2.1em" width="4.4em" height="0.8em" />
-        <rect x="0" y="3.15em" width="4em" height="0.8em" /> <rect x="4.3em" y="3.15em" width="1.53em" height="0.8em" />
-        <rect x="0" y="4.2em" width="6em" height="0.8em" />
-        <rect x="0" y="5.25em" width="6.3em" height="0.8em" /> 
-        <rect x="0" y="6.3em" width="5.3em" height="0.8em" /> 
-        <rect x="0" y="7.35em" width="6.3em" height="0.8em" /> 
-        <rect x="0" y="8.4em" width="3em" height="0.8em" /> <rect x="3.3em" y="8.4em" width="3em" height="0.8em" /> 
-        <rect x="0" y="9.45em" width="4.3em" height="0.8em" />  
-        <rect x="0" y="10.5em" width="6.3em" height="0.8em" /> 
+        <rect x="0" y="0" width="100.8" height="12.8" />
+        <rect x="0" y="16.8" width="40" height="12.8" /> <rect x="44.8" y="16.8" width="35.2" height="12.8" />
+        <rect x="0" y="33.6" width="24" height="12.8" /> <rect x="28.8" y="33.6" width="70.4" height="12.8" />
+        <rect x="0" y="50.4" width="64" height="12.8" /> <rect x="68.8" y="50.4" width="24.48" height="12.8" />
+        <rect x="0" y="67.2" width="96" height="12.8" />
+        <rect x="0" y="84" width="100.8" height="12.8" />
+        <rect x="0" y="100.8" width="84.8" height="12.8" />
+        <rect x="0" y="117.6" width="100.8" height="12.8" />
+        <rect x="0" y="134.4" width="48" height="12.8" /> <rect x="52.8" y="134.4" width="48" height="12.8" />
+        <rect x="0" y="151.2" width="68.8" height="12.8" />
+        <rect x="0" y="168" width="100.8" height="12.8" />
       </g>
       <g class="float right" transform="translate(215,5)">
         <path d="M0,180 V0 H100 V180"/>
-        <text x="50" y="50">right <tspan x="50" dy="1.25em">float </tspan></text>
+        <text x="50" y="50">right <tspan x="50" dy="20">float </tspan></text>
       </g>
     </g>
   </g>
@@ -86,30 +86,30 @@
       <path d="M0,245 V0 H180 V245" class="page"/>
       <g class="float left" transform="translate(5,5)">
         <path d="M0,0 V100 H100 V0"/>
-        <text x="50" y="40">left <tspan x="50" dy="1.25em">float </tspan><tspan x="50" dy="1.25em">cont. </tspan></text>
+        <text x="50" y="40">left <tspan x="50" dy="20">float </tspan><tspan x="50" dy="20">cont. </tspan></text>
       </g>
-      <g class="float right" transform="translate(70,110)">
+      <g class="float right" transform="translate(75,110)">
         <path d="M0,0 V100 H100 V0"/>
-        <text x="50" y="40">right <tspan x="50" dy="1.25em">float </tspan><tspan x="50" dy="1.25em">cont. </tspan></text>
+        <text x="50" y="40">right <tspan x="50" dy="20">float </tspan><tspan x="50" dy="20">cont. </tspan></text>
       </g>
 
       <g class="lorem" transform="translate(110,5)">
-        <rect x="0" y="0" width="4em" height="0.8em" /> 
-        <rect x="0" y="1.05em" width="3.5em" height="0.8em" />
-        <rect x="0" y="2.1em" width="4em" height="0.8em" />
-        <rect x="0" y="3.15em" width="4em" height="0.8em" />
-        <rect x="0" y="4.2em" width="3em" height="0.8em" />
-        <rect x="0" y="5.25em" width="4em" height="0.8em" /> 
+        <rect x="0" y="0" width="64" height="12.8" />
+        <rect x="0" y="16.8" width="56" height="12.8" />
+        <rect x="0" y="33.6" width="64" height="12.8" />
+        <rect x="0" y="50.4" width="64" height="12.8" />
+        <rect x="0" y="67.2" width="48" height="12.8" />
+        <rect x="0" y="84" width="64" height="12.8" />
       </g>
       <g class="lorem" transform="translate(5,111)">
-        <rect x="0" y="0" width="3.8em" height="0.8em" /> 
-        <rect x="0" y="1.05em" width="3em" height="0.8em" />
-        <rect x="0" y="2.1em" width="1.5em" height="0.8em" /> <rect x="1.8em" y="2.1em" width="2em" height="0.8em" />
-        <rect x="0" y="3.15em" width="3.8em" height="0.8em" />
-        <rect x="0" y="4.2em" width="3.5em" height="0.8em" />
-        <rect x="0" y="5.25em" width="3.8em" height="0.8em" /> 
-        <rect x="0" y="6.35em" width="1.5em" height="0.8em" /> <rect x="1.8em" y="6.35em" width="4.4em" height="0.8em" /> <rect x="6.5em" y="6.35em" width="4.2em" height="0.8em" />
-        <rect x="0" y="7.40em" width="4em" height="0.8em" /> <rect x="4.3em" y="7.40em" width="1.53em" height="0.8em" />
+        <rect x="0" y="0" width="60.8" height="12.8" />
+        <rect x="0" y="16.8" width="48" height="12.8" />
+        <rect x="0" y="33.6" width="24" height="12.8" /> <rect x="28.8" y="33.6" width="32" height="12.8" />
+        <rect x="0" y="50.4" width="60.8" height="12.8" />
+        <rect x="0" y="67.2" width="56" height="12.8" />
+        <rect x="0" y="84" width="60.8" height="12.8" />
+        <rect x="0" y="101.6" width="24" height="12.8" /> <rect x="28.8" y="101.6" width="70.4" height="12.8" /> <rect x="104" y="101.6" width="67.2" height="12.8" />
+        <rect x="0" y="118.4" width="64" height="12.8" /> <rect x="68.8" y="118.4" width="24.48" height="12.8" />
       </g>
     </g>
   </g>
