Proof of concept of tables

tomschr · tomschr · commit e451212e961b · 2022-05-05T11:48:03.000+02:00
For Dima regarding container_support_matrix.png

Things to watch for:

* Zebra style table
  This may be misleading, but with a little CSS magic it can be
  removed
* SVG graphic
  The checkmark and crossmark are SVG, but it could be done
  with text as well
* Alignment
  May be a bit off, but this could be eliminated with some CSS/XSLT
  magic
diff --git a/images/src/svg/black-checkmark.svg b/images/src/svg/black-checkmark.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="120"
+   height="120"
+   viewBox="0 0 120 120"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="black-checkmark.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="5.25"
+     inkscape:cx="60"
+     inkscape:cy="60"
+     inkscape:window-width="2007"
+     inkscape:window-height="861"
+     inkscape:window-x="419"
+     inkscape:window-y="206"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <rect
+       x="13.245908"
+       y="19.042376"
+       width="89.579404"
+       height="85.036923"
+       id="rect2343" />
+  </defs>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       aria-label="✔"
+       transform="matrix(3.4630692,0,0,3.4630692,-70.898525,-78.331434)"
+       id="text2341"
+       style="font-weight:500;font-size:40px;line-height:1.25;font-family:Poppins;-inkscape-font-specification:'Poppins, Medium';white-space:pre;shape-inside:url(#rect2343)">
+      <path
+         d="m 52.648726,23.859931 q -9.21875,15.15625 -14.375,33.28125 h -5.78125 q -2.8125,-7.65625 -8.4375,-15.78125 l 5.9375,-2.96875 q 3.28125,6.25 5.15625,12.03125 4.0625,-15 10.46875,-27.65625 z"
+         id="path4063" />
+    </g>
+  </g>
+</svg>
diff --git a/images/src/svg/black-crossmark.svg b/images/src/svg/black-crossmark.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="120"
+   height="120"
+   viewBox="0 0 120 120"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="black-crossmark.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="7.41"
+     inkscape:cx="79.014845"
+     inkscape:cy="45.748988"
+     inkscape:window-width="2370"
+     inkscape:window-height="1405"
+     inkscape:window-x="419"
+     inkscape:window-y="66"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer2"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <sodipodi:guide
+       position="6.0552093,114.03384"
+       orientation="0,-1"
+       id="guide35057" />
+    <sodipodi:guide
+       position="9.4390027,90.614426"
+       orientation="1,0"
+       id="guide35059" />
+    <sodipodi:guide
+       position="72.573464,63.544078"
+       orientation="1,0"
+       id="guide35061" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <rect
+       x="13.245908"
+       y="19.042376"
+       width="89.579404"
+       height="85.036923"
+       id="rect2343" />
+  </defs>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Vektor"
+     style="display:inline">
+    <path
+       id="rect34640"
+       style="opacity:0.914646;fill:#000000;stroke:none;stroke-width:6.63635;stroke-linecap:square;stroke-linejoin:bevel"
+       d="M 22.901233,5.6905618 5.92527,24.022542 43.653446,62.255362 4.8301572,102.26989 23.526031,118.8442 61.18898,80.024337 99.48359,118.83046 116.45956,100.49848 78.573464,62.107745 116.28104,23.246694 97.581735,6.6758198 61.037929,44.33877 Z" />
+  </g>
+</svg>
diff --git a/images/src/svg/blue-checkmark.svg b/images/src/svg/blue-checkmark.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="120"
+   height="120"
+   viewBox="0 0 120 120"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="blue-checkmark.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="5.25"
+     inkscape:cx="60"
+     inkscape:cy="60"
+     inkscape:window-width="2007"
+     inkscape:window-height="861"
+     inkscape:window-x="419"
+     inkscape:window-y="206"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <rect
+       x="13.245908"
+       y="19.042376"
+       width="89.579404"
+       height="85.036923"
+       id="rect2343" />
+  </defs>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       aria-label="✔"
+       transform="matrix(3.4630692,0,0,3.4630692,-70.898525,-78.331434)"
+       id="text2341"
+       style="font-weight:500;font-size:40px;line-height:1.25;font-family:Poppins;-inkscape-font-specification:'Poppins, Medium';white-space:pre;shape-inside:url(#rect2343)">
+      <path
+         d="m 52.648726,23.859931 q -9.21875,15.15625 -14.375,33.28125 h -5.78125 q -2.8125,-7.65625 -8.4375,-15.78125 l 5.9375,-2.96875 q 3.28125,6.25 5.15625,12.03125 4.0625,-15 10.46875,-27.65625 z"
+         id="path4063"
+         style="fill:#bfcbfb" />
+    </g>
+  </g>
+</svg>
diff --git a/images/src/svg/green-checkmark.svg b/images/src/svg/green-checkmark.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="120"
+   height="120"
+   viewBox="0 0 120 120"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="green-checkmark.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="5.25"
+     inkscape:cx="60"
+     inkscape:cy="60"
+     inkscape:window-width="2007"
+     inkscape:window-height="861"
+     inkscape:window-x="419"
+     inkscape:window-y="206"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <rect
+       x="13.245908"
+       y="19.042376"
+       width="89.579404"
+       height="85.036923"
+       id="rect2343" />
+  </defs>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       aria-label="✔"
+       transform="matrix(3.4630692,0,0,3.4630692,-70.898525,-78.331434)"
+       id="text2341"
+       style="font-weight:500;font-size:40px;line-height:1.25;font-family:Poppins;-inkscape-font-specification:'Poppins, Medium';white-space:pre;shape-inside:url(#rect2343)">
+      <path
+         d="m 52.648726,23.859931 q -9.21875,15.15625 -14.375,33.28125 h -5.78125 q -2.8125,-7.65625 -8.4375,-15.78125 l 5.9375,-2.96875 q 3.28125,6.25 5.15625,12.03125 4.0625,-15 10.46875,-27.65625 z"
+         id="path4063"
+         style="fill:#30ba78" />
+    </g>
+  </g>
+</svg>
diff --git a/images/src/svg/red-crossmark.svg b/images/src/svg/red-crossmark.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="120"
+   height="120"
+   viewBox="0 0 120 120"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="red-crossmark.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="7.41"
+     inkscape:cx="79.014845"
+     inkscape:cy="45.748988"
+     inkscape:window-width="2370"
+     inkscape:window-height="1405"
+     inkscape:window-x="419"
+     inkscape:window-y="66"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer2"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <sodipodi:guide
+       position="6.0552093,114.03384"
+       orientation="0,-1"
+       id="guide35057" />
+    <sodipodi:guide
+       position="9.4390027,90.614426"
+       orientation="1,0"
+       id="guide35059" />
+    <sodipodi:guide
+       position="72.573464,63.544078"
+       orientation="1,0"
+       id="guide35061" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2">
+    <rect
+       x="13.245908"
+       y="19.042376"
+       width="89.579404"
+       height="85.036923"
+       id="rect2343" />
+  </defs>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Vektor"
+     style="display:inline">
+    <path
+       id="rect34640"
+       style="opacity:0.914646;fill:#fe7c3f;stroke:none;stroke-width:6.63635;stroke-linecap:square;stroke-linejoin:bevel"
+       d="M 22.901233,5.6905618 5.92527,24.022542 43.653446,62.255362 4.8301572,102.26989 23.526031,118.8442 61.18898,80.024337 99.48359,118.83046 116.45956,100.49848 78.573464,62.107745 116.28104,23.246694 97.581735,6.6758198 61.037929,44.33877 Z" />
+  </g>
+</svg>
diff --git a/xml/containers-support.xml b/xml/containers-support.xml
