sis-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From desruisse...@apache.org
Subject svn commit: r1814422 - in /sis/site/trunk: book/en/annexes/design/ book/en/overview/ book/en/referencing/ book/en/storage/ book/en/utility/ book/fr/annexes/design/ book/fr/overview/ book/fr/referencing/ book/fr/storage/ book/fr/utility/ content/book/ c...
Date Mon, 06 Nov 2017 16:04:36 GMT
Author: desruisseaux
Date: Mon Nov  6 16:04:36 2017
New Revision: 1814422

URL: http://svn.apache.org/viewvc?rev=1814422&view=rev
Log:
Avoid use of <table> for layout purpose.

Modified:
    sis/site/trunk/book/en/annexes/design/AffineTransform.html
    sis/site/trunk/book/en/overview/DataAccess.html
    sis/site/trunk/book/en/referencing/CoordinateOperations.html
    sis/site/trunk/book/en/storage/XML-ISO-19115.html
    sis/site/trunk/book/en/utility/Internationalization.html
    sis/site/trunk/book/fr/annexes/design/AffineTransform.html
    sis/site/trunk/book/fr/overview/DataAccess.html
    sis/site/trunk/book/fr/referencing/CoordinateOperations.html
    sis/site/trunk/book/fr/storage/XML-ISO-19115.html
    sis/site/trunk/book/fr/utility/Internationalization.html
    sis/site/trunk/content/book/book.css
    sis/site/trunk/content/book/en/developer-guide.html
    sis/site/trunk/content/book/fr/developer-guide.html

Modified: sis/site/trunk/book/en/annexes/design/AffineTransform.html
URL: http://svn.apache.org/viewvc/sis/site/trunk/book/en/annexes/design/AffineTransform.html?rev=1814422&r1=1814421&r2=1814422&view=diff
==============================================================================
--- sis/site/trunk/book/en/annexes/design/AffineTransform.html [UTF-8] (original)
+++ sis/site/trunk/book/en/annexes/design/AffineTransform.html [UTF-8] Mon Nov  6 16:04:36 2017
@@ -97,20 +97,26 @@
           <var>A</var>×<var>B</var>×<var>C</var> is equivalent to first applying operation <var>C</var>,
           then operation <var>B</var> and finally operation <var>A</var>.
         </p>
-        <table class="hidden"><tr>
-          <th>Change 2</th><th></th>
-          <th>Change 1</th><th></th>
-          <th>Initial conversion</th><th></th>
-          <th>Concatenated operation</th>
-        </tr><tr>
-          <td style="vertical-align: middle"><xi:include href="../../../math/AxisSwapping2D.html"/></td>
-          <td style="vertical-align: middle; padding-left: 15px; padding-right: 15px">×</td>
-          <td style="vertical-align: middle"><xi:include href="../../../math/InverseAxisY.html"/></td>
-          <td style="vertical-align: middle; padding-left: 15px; padding-right: 15px">×</td>
-          <td style="vertical-align: middle"><xi:include href="../../../math/PixelToGeographicSameAxisDirections.html"/></td>
-          <td style="vertical-align: middle; padding-left: 15px; padding-right: 15px">=</td>
-          <td style="vertical-align: middle"><xi:include href="../../../math/PixelToGeographicReverseOrderAndY.html"/></td>
-        </tr></table>
+        <div style="display:table; margin:auto">
+          <div style="display:table-row">
+            <div style="display:table-cell" class="caption">Change 2</div>
+            <div style="display:table-cell" class="caption"> </div>
+            <div style="display:table-cell" class="caption">Change 1</div>
+            <div style="display:table-cell" class="caption"> </div>
+            <div style="display:table-cell" class="caption">Initial conversion</div>
+            <div style="display:table-cell" class="caption"> </div>
+            <div style="display:table-cell" class="caption">Concatenated operation</div>
+          </div>
+          <div style="display:table-row">
+            <div style="display:table-cell; vertical-align:middle"><xi:include href="../../../math/AxisSwapping2D.html"/></div>
+            <div style="display:table-cell; vertical-align:middle; padding-left: 15px; padding-right: 15px">×</div>
+            <div style="display:table-cell; vertical-align:middle"><xi:include href="../../../math/InverseAxisY.html"/></div>
+            <div style="display:table-cell; vertical-align:middle; padding-left: 15px; padding-right: 15px">×</div>
+            <div style="display:table-cell; vertical-align:middle"><xi:include href="../../../math/PixelToGeographicSameAxisDirections.html"/></div>
+            <div style="display:table-cell; vertical-align:middle; padding-left: 15px; padding-right: 15px">=</div>
+            <div style="display:table-cell; vertical-align:middle"><xi:include href="../../../math/PixelToGeographicReverseOrderAndY.html"/></div>
+          </div>
+        </div>
         <p>
           A key principle is that there is no need to write Java code dedicated to above kinds of axis changes.
           Those operations, and many other, can be handled by matrix algebra.

Modified: sis/site/trunk/book/en/overview/DataAccess.html
URL: http://svn.apache.org/viewvc/sis/site/trunk/book/en/overview/DataAccess.html?rev=1814422&r1=1814421&r2=1814422&view=diff
==============================================================================
--- sis/site/trunk/book/en/overview/DataAccess.html (original)
+++ sis/site/trunk/book/en/overview/DataAccess.html Mon Nov  6 16:04:36 2017
@@ -39,13 +39,13 @@
         It is possible to instantiate data structures programmatically in memory.
         But more often, data are read from files or other kinds of data stores.
         There is different ways to access those data, but an easy way is to use
-        the <code class="sis">DataStores.open(Object)</code> convenience method.
+        the <code class="SIS">DataStores.open(Object)</code> convenience method.
         The method argument can be a path to a data file
         (<code>File</code>, <code>Path</code>, <code>URL</code>, <code>URI</code>), a stream
         (<code>Channel</code>, <code>DataInput</code>, <code>InputStream</code>, <code>Reader</code>),
         a connection to a data base (<code>DataSource</code>, <code>Connection</code>)
         or other kinds of object specific to the data source.
-        The <code class="sis">DataStores.open(Object)</code> method detects data formats
+        The <code class="SIS">DataStores.open(Object)</code> method detects data formats
         and returns a <code>DataStore</code> instance for that format.
       </p>
       <p>

Modified: sis/site/trunk/book/en/referencing/CoordinateOperations.html
URL: http://svn.apache.org/viewvc/sis/site/trunk/book/en/referencing/CoordinateOperations.html?rev=1814422&r1=1814421&r2=1814422&view=diff
==============================================================================
--- sis/site/trunk/book/en/referencing/CoordinateOperations.html [UTF-8] (original)
+++ sis/site/trunk/book/en/referencing/CoordinateOperations.html [UTF-8] Mon Nov  6 16:04:36 2017
@@ -161,73 +161,61 @@ public class MyApp {
         (reason will become clearer soon):
       </p>
 
-      <table class="hidden">
-        <tr>
-          <th>Equation</th>
-          <th>Java code</th>
-        </tr>
-        <tr>
-          <td style="vertical-align:middle; min-width:350px; padding-right:60px">
-            <math xmlns="http://www.w3.org/1998/Math/MathML" display="block" alttext="MathML capable browser required">
-              <mi>P</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo>
-              <mo>=</mo>
-              <mfenced open="[" close="]">
-                <mtable>
-                  <mtr><mtd><mi>x</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mtd></mtr>
-                  <mtr><mtd><mi>y</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mtd></mtr>
-                </mtable>
-              </mfenced>
-            </math>
-          </td>
-          <td style="vertical-align:middle; min-width:500px; padding-left:60px">
-
+      <div class="row-of-boxes">
+        <div style="min-width:350px; padding-right:60px">
+          <div class="caption">Equation</div>
+          <math xmlns="http://www.w3.org/1998/Math/MathML" display="block" alttext="MathML capable browser required">
+            <mi>P</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo>
+            <mo>=</mo>
+            <mfenced open="[" close="]">
+              <mtable>
+                <mtr><mtd><mi>x</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mtd></mtr>
+                <mtr><mtd><mi>y</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mtd></mtr>
+              </mtable>
+            </mfenced>
+          </math>
+        </div>
+        <div style="min-width:500px; padding-left:60px">
+          <div class="caption">Java code</div>
 <pre style="margin:0"><code>DirectPosition geographic = new DirectPosition2D(<var>φ</var>, <var>λ</var>);
 DirectPosition projected = <var><b>P</b></var>.transform(geographic, null);
 double <var>x</var> = projected.getOrdinate(0);
 double <var>y</var> = projected.getOrdinate(1);</code></pre>
-
-          </td>
-        </tr>
-      </table>
+        </div>
+      </div>
 
       <p>The map projection partial derivate at this point can be represented by a Jacobian matrix:</p>
 
-      <table class="hidden">
-        <tr>
-          <th>Equation</th>
-          <th>Java code</th>
-        </tr>
-        <tr>
-          <td style="vertical-align:middle; min-width:350px; padding-right:60px">
-            <math xmlns="http://www.w3.org/1998/Math/MathML" display="block" alttext="MathML capable browser required">
-              <msup><mi>P</mi><mo>′</mo></msup><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo>
-              <mo>=</mo>
-              <msub><mi>JAC</mi><mrow><mi>P</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow></msub>
-              <mo>=</mo>
-              <mfenced open="[" close="]">
-                <mtable>
-                  <mtr>
-                    <mtd><mfrac><mrow><mo>∂</mo><mi>x</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>φ</mi></mrow></mfrac></mtd>
-                    <mtd><mfrac><mrow><mo>∂</mo><mi>x</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>λ</mi></mrow></mfrac></mtd>
-                  </mtr>
-                  <mtr>
-                    <mtd><mfrac><mrow><mo>∂</mo><mi>y</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>φ</mi></mrow></mfrac></mtd>
-                    <mtd><mfrac><mrow><mo>∂</mo><mi>y</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>λ</mi></mrow></mfrac></mtd>
-                  </mtr>
-                </mtable>
-              </mfenced>
-            </math>
-          </td>
-          <td style="vertical-align:middle; min-width:500px; padding-left:60px">
-
+      <div class="row-of-boxes">
+        <div style="min-width:350px; padding-right:60px">
+          <div class="caption">Equation</div>
+          <math xmlns="http://www.w3.org/1998/Math/MathML" display="block" alttext="MathML capable browser required">
+            <msup><mi>P</mi><mo>′</mo></msup><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo>
+            <mo>=</mo>
+            <msub><mi>JAC</mi><mrow><mi>P</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow></msub>
+            <mo>=</mo>
+            <mfenced open="[" close="]">
+              <mtable>
+                <mtr>
+                  <mtd><mfrac><mrow><mo>∂</mo><mi>x</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>φ</mi></mrow></mfrac></mtd>
+                  <mtd><mfrac><mrow><mo>∂</mo><mi>x</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>λ</mi></mrow></mfrac></mtd>
+                </mtr>
+                <mtr>
+                  <mtd><mfrac><mrow><mo>∂</mo><mi>y</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>φ</mi></mrow></mfrac></mtd>
+                  <mtd><mfrac><mrow><mo>∂</mo><mi>y</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>λ</mi></mrow></mfrac></mtd>
+                </mtr>
+              </mtable>
+            </mfenced>
+          </math>
+        </div>
+        <div style="min-width:500px; padding-left:60px">
+          <div class="caption">Java code</div>
 <pre style="margin:0"><code>DirectPosition geographic = new DirectPosition2D(<var>φ</var>, <var>λ</var>);
 Matrix jacobian = <var><b>P</b></var>.derivative(geographic);
 double dx_dλ = jacobian.getElement(0,1);
 double dy_dφ = jacobian.getElement(1,0);</code></pre>
-
-          </td>
-        </tr>
-      </table>
+        </div>
+      </div>
 
       <p>
         Remaining equations in this section will abridge
@@ -247,9 +235,10 @@ double dy_dφ = jacobian.getElement(1,0)
         in the Jacobian matrices.
       </p>
 
-      <table class="hidden"><tr>
-        <td><img style="border: solid 1px" src="../../../content/book/images/Derivatives.png" alt="Example of a map projection derivative"/></td>
-        <td style="padding-left: 30px; vertical-align: middle">
+      <div class="row-of-boxes">
+        <div>
+          <img style="border: solid 1px" src="../../../content/book/images/Derivatives.png" alt="Example of a map projection derivative"/>
+        </div><div>
           <p>where vectors are related to the matrix by:</p>
           <math xmlns="http://www.w3.org/1998/Math/MathML" display="block" alttext="MathML capable browser required">
             <mtable><mtr>
@@ -282,8 +271,8 @@ double dy_dφ = jacobian.getElement(1,0)
               </mtd>
             </mtr></mtable>
           </math>
-        </td>
-      </tr></table>
+        </div>
+      </div>
 
       <p>
         Above figure shows one usage of map projection derivatives:
@@ -296,33 +285,34 @@ double dy_dφ = jacobian.getElement(1,0)
       <p>
         <span style="color: red">TODO</span>
       </p>
-      <table class="hidden">
-        <tr>
-          <th>Envelope before projection</th>
-          <th>Geometric shape after projection</th>
-        </tr>
-        <tr>
-          <td><img style="border: solid 1px; margin-right: 15px" src="../../../content/book/images/GeographicArea.png" alt="Envelope in a geographic CRS"/></td>
-          <td><img style="border: solid 1px; margin-left:  15px" src="../../../content/book/images/ConicArea.png" alt="Shape in a projected CRS"/></td>
-        </tr>
-      </table>
+      <div class="row-of-boxes">
+        <div>
+          <div class="caption">Envelope before projection</div>
+          <img style="border: solid 1px; margin-right: 15px" src="../../../content/book/images/GeographicArea.png" alt="Envelope in a geographic CRS"/>
+        </div><div>
+          <div class="caption">Geometric shape after projection</div>
+          <img style="border: solid 1px; margin-left:  15px" src="../../../content/book/images/ConicArea.png" alt="Shape in a projected CRS"/>
+        </div>
+      </div>
       <p>
         <span style="color: red">TODO</span>
       </p>
-      <table class="hidden"><tr><td>
-        <img src="../../../content/book/images/Approximation.png" alt="Cubic approximation of an envelope bounds"/>
-      </td><td style="padding-left: 60px">
-        Legend:
-        <ul>
-          <li><b>Blue:</b> the geometric shape of the envelope after projection.
-            This is the shape from which to get a new envelope.</li>
-          <li><b>Red</b> (with hash): The
-            <var>y</var> = <var>C</var>₀ + <var>C</var>₁λ + <var>C</var>₂λ² + <var>C</var>₃λ³ approximation.</li>
-          <li><b>Green</b> (dashed line): Position λ<sub>m</sub> of approximation minimum, obtained by resolving
-            0 = <var>C</var>₁ + 2<var>C</var>₂λ<sub>m</sub> + 3<var>C</var>₃λ<sub>m</sub>².
-            The same cubic line can have two minimums.</li>
-        </ul>
-      </td></tr></table>
+      <div class="row-of-boxes">
+        <div>
+          <img src="../../../content/book/images/Approximation.png" alt="Cubic approximation of an envelope bounds"/>
+        </div><div>
+          Legend:
+          <ul>
+            <li><b>Blue:</b> the geometric shape of the envelope after projection.
+              This is the shape from which to get a new envelope.</li>
+            <li><b>Red</b> (with hash): The
+              <var>y</var> = <var>C</var>₀ + <var>C</var>₁λ + <var>C</var>₂λ² + <var>C</var>₃λ³ approximation.</li>
+            <li><b>Green</b> (dashed line): Position λ<sub>m</sub> of approximation minimum, obtained by resolving
+              0 = <var>C</var>₁ + 2<var>C</var>₂λ<sub>m</sub> + 3<var>C</var>₃λ<sub>m</sub>².
+              The same cubic line can have two minimums.</li>
+          </ul>
+        </div>
+      </div>
       <p>
         <span style="color: red">TODO</span>
       </p>
@@ -332,35 +322,35 @@ double dy_dφ = jacobian.getElement(1,0)
       <p>
         <span style="color: red">TODO</span>
       </p>
-      <table class="hidden">
-        <tr>
-          <th style="text-align: left">Source image</th>
-          <th style="text-align: right">Destination image</th>
-        </tr>
-        <tr>
-          <td colspan="2"><img src="../../../content/book/images/RasterProjection.png" alt="Intersection of derivatives"/></td>
-        </tr>
-      </table>
+      <div style="display:flex; flex-direction:column; align-items:center">
+        <div style="display:flex; justify-content:space-between; width:564px">
+          <div class="caption">Source image</div>
+          <div class="caption">Destination image</div>
+        </div>
+        <img src="../../../content/book/images/RasterProjection.png" alt="Raster reprojection"/>
+      </div>
       <p>
         <span style="color: red">TODO</span>
       </p>
-      <table class="hidden"><tr>
-        <td><img src="../../../content/book/images/WarpGrid.png" alt="Intersection of derivatives"/></td>
-        <td style="padding-left: 60px">
-        Legend:
-        <ul>
-          <li><b>Blue dots:</b>  first  iteration (9 points).</li>
-          <li><b>Green dots:</b> second iteration (25 points, including 16 news).</li>
-          <li><b>Red dots:</b>   third  iteration (81 points, including 56 news).</li>
-        </ul>
-        Continuing…
-        <ul>
-          <li>Forth iteration:  289 points, including  208 news.</li>
-          <li>Fifth iteration: 1089 points, including  800 news.</li>
-          <li>Sixth iteration: 4225 points, including 3136 news.</li>
-          <li>…</li>
-        </ul>
-      </td></tr></table>
+      <div class="row-of-boxes">
+        <div>
+          <img src="../../../content/book/images/WarpGrid.png" alt="Warp grid"/>
+        </div><div>
+          Legend:
+          <ul>
+            <li><b>Blue dots:</b>  first  iteration (9 points).</li>
+            <li><b>Green dots:</b> second iteration (25 points, including 16 news).</li>
+            <li><b>Red dots:</b>   third  iteration (81 points, including 56 news).</li>
+          </ul>
+          Continuing…
+          <ul>
+            <li>Forth iteration:  289 points, including  208 news.</li>
+            <li>Fifth iteration: 1089 points, including  800 news.</li>
+            <li>Sixth iteration: 4225 points, including 3136 news.</li>
+            <li>…</li>
+          </ul>
+        </div>
+      </div>
       <p>
         <span style="color: red">TODO</span>
       </p>

Modified: sis/site/trunk/book/en/storage/XML-ISO-19115.html
URL: http://svn.apache.org/viewvc/sis/site/trunk/book/en/storage/XML-ISO-19115.html?rev=1814422&r1=1814421&r2=1814422&view=diff
==============================================================================
--- sis/site/trunk/book/en/storage/XML-ISO-19115.html [UTF-8] (original)
+++ sis/site/trunk/book/en/storage/XML-ISO-19115.html [UTF-8] Mon Nov  6 16:04:36 2017
@@ -145,14 +145,9 @@
         while the part on the right references this element:
       </p>
 
-      <table class="hidden">
-        <tr>
-          <th>Defining an Identifier</th>
-          <th>Using a Defined Identifier</th>
-        </tr>
-        <tr>
-          <td>
-
+      <div class="row-of-boxes">
+        <div>
+          <div class="caption">Defining an identifier</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;MD_MetaData&gt;
   &lt;identificationInfo&gt;
     &lt;MD_DataIdentification id="<b>my_id</b>"&gt;
@@ -160,16 +155,14 @@
     &lt;/MD_DataIdentification&gt;
   &lt;/identificationInfo&gt;
 &lt;/MD_MetaData&gt;</samp></pre>
-
-          </td><td>
-
+        </div>
+        <div>
+          <div class="caption">Using a defined identifier</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;MD_MetaData&gt;
   &lt;identificationInfo xlink:href="<b>#my_id</b>"/&gt;
 &lt;/MD_MetaData&gt;</samp></pre>
-
-          </td>
-        </tr>
-      </table>
+        </div>
+      </div>
 
       <p>
         The decision of which attribute to use depends on the scope of the referenced item:
@@ -250,14 +243,9 @@ public class MyClass {
         <code class="SIS">getNilReason()</code> method returns the constant <code class="SIS">UNKNOWN</code>.
       </p>
 
-      <table class="hidden">
-        <tr>
-          <th>Information Included</th>
-          <th>Missing Information</th>
-        </tr>
-        <tr>
-          <td>
-
+      <div class="row-of-boxes">
+        <div>
+          <div class="caption">Information included</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;CI_Citation&gt;
   &lt;series&gt;
     &lt;CI_Series&gt;
@@ -265,16 +253,14 @@ public class MyClass {
     &lt;/CI_Series&gt;
   &lt;/series&gt;
 &lt;/CI_Citation&gt;</samp></pre>
-
-        </td><td>
-
+        </div>
+        <div>
+          <div class="caption">Missing information</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;CI_Citation&gt;
   &lt;series nilReason="unknown"/&gt;
 &lt;/CI_Citation&gt;</samp></pre>
-
-          </td>
-        </tr>
-      </table>
+        </div>
+      </div>
     </section>
   </body>
 </html>

Modified: sis/site/trunk/book/en/utility/Internationalization.html
URL: http://svn.apache.org/viewvc/sis/site/trunk/book/en/utility/Internationalization.html?rev=1814422&r1=1814421&r2=1814422&view=diff
==============================================================================
--- sis/site/trunk/book/en/utility/Internationalization.html [UTF-8] (original)
+++ sis/site/trunk/book/en/utility/Internationalization.html [UTF-8] Mon Nov  6 16:04:36 2017
@@ -153,24 +153,18 @@
         Thus, instead of the loop on the left below, international applications must generally use the loop on the right:
       </p>
 
-      <table class="hidden">
-        <tr>
-          <th>Loop to Avoid</th>
-          <th>Recommended loop</th>
-          <th>Supplementary character examples</th>
-        </tr>
-        <tr>
-          <td>
-
+      <div class="row-of-boxes">
+        <div>
+          <div class="caption">Loop to Avoid</div>
 <pre style="margin-top: 6pt"><code>for (int i=0; i&lt;string.length(); i++) {
     char c = string.charAt(i);
     if (Character.isWhitespace(c)) {
         // A blank space was found.
     }
 }</code></pre>
-
-          </td><td>
-
+        </div>
+        <div>
+          <div class="caption">Recommended loop</div>
 <pre style="margin-top: 6pt"><code>for (int i=0; i&lt;string.length();) {
     int c = string.codePointAt(i);
     if (Character.isWhitespace(c)) {
@@ -178,14 +172,14 @@
     }
     i += Character.charCount(c);
 }</code></pre>
-
-          </td><td>
+        </div>
+        <div>
+          <div class="caption">Supplementary character examples</div>
             <center>(rendering depends on browser capabilities)</center>
             <p style="font-size: 40px">&#x1F689; &#x1F6A5; &#x1F6A7; &#x1F6AB;
               &#x1F6AF; &#x1F6B8; &#x1F6BA; &#x1F6B9; &#x1F6C4; &#x1F6AD;</p>
-          </td>
-        </tr>
-      </table>
+        </div>
+      </div>
 
       <p>
         <abbr>SIS</abbr> supports supplementary characters by using the loop on the right where necessary,

Modified: sis/site/trunk/book/fr/annexes/design/AffineTransform.html
URL: http://svn.apache.org/viewvc/sis/site/trunk/book/fr/annexes/design/AffineTransform.html?rev=1814422&r1=1814421&r2=1814422&view=diff
==============================================================================
--- sis/site/trunk/book/fr/annexes/design/AffineTransform.html [UTF-8] (original)
+++ sis/site/trunk/book/fr/annexes/design/AffineTransform.html [UTF-8] Mon Nov  6 16:04:36 2017
@@ -102,20 +102,26 @@
           <var>A</var>×<var>B</var>×<var>C</var> est équivalent à d’abord appliquer l’opération <var>C</var>,
           suivit de l’opération <var>B</var> et finalement l’opération <var>A</var>.
         </p>
-        <table class="hidden"><tr>
-          <th>Changement 2</th><th></th>
-          <th>Changement 1</th><th></th>
-          <th>Conversion initiale</th><th></th>
-          <th>Opérations combinées</th>
-        </tr><tr>
-          <td style="vertical-align: middle"><xi:include href="../../../math/AxisSwapping2D.html"/></td>
-          <td style="vertical-align: middle; padding-left: 15px; padding-right: 15px">×</td>
-          <td style="vertical-align: middle"><xi:include href="../../../math/InverseAxisY.html"/></td>
-          <td style="vertical-align: middle; padding-left: 15px; padding-right: 15px">×</td>
-          <td style="vertical-align: middle"><xi:include href="../../../math/PixelToGeographicSameAxisDirections.html"/></td>
-          <td style="vertical-align: middle; padding-left: 15px; padding-right: 15px">=</td>
-          <td style="vertical-align: middle"><xi:include href="../../../math/PixelToGeographicReverseOrderAndY.html"/></td>
-        </tr></table>
+        <div style="display:table; margin:auto">
+          <div style="display:table-row">
+            <div style="display:table-cell" class="caption">Changement 2</div>
+            <div style="display:table-cell" class="caption"> </div>
+            <div style="display:table-cell" class="caption">Changement 1</div>
+            <div style="display:table-cell" class="caption"> </div>
+            <div style="display:table-cell" class="caption">Conversion initiale</div>
+            <div style="display:table-cell" class="caption"> </div>
+            <div style="display:table-cell" class="caption">Opérations combinées</div>
+          </div>
+          <div style="display:table-row">
+            <div style="display:table-cell; vertical-align:middle"><xi:include href="../../../math/AxisSwapping2D.html"/></div>
+            <div style="display:table-cell; vertical-align:middle; padding-left: 15px; padding-right: 15px">×</div>
+            <div style="display:table-cell; vertical-align:middle"><xi:include href="../../../math/InverseAxisY.html"/></div>
+            <div style="display:table-cell; vertical-align:middle; padding-left: 15px; padding-right: 15px">×</div>
+            <div style="display:table-cell; vertical-align:middle"><xi:include href="../../../math/PixelToGeographicSameAxisDirections.html"/></div>
+            <div style="display:table-cell; vertical-align:middle; padding-left: 15px; padding-right: 15px">=</div>
+            <div style="display:table-cell; vertical-align:middle"><xi:include href="../../../math/PixelToGeographicReverseOrderAndY.html"/></div>
+          </div>
+        </div>
         <p>
           Un principe clé est qu’il n’y a pas besoin d’écrire un code dédié à ce type d’opérations sur les axes.
           Ces opérations, et bien d’autres, sont prises en compte naturellement par l’algèbre matricielle.

Modified: sis/site/trunk/book/fr/overview/DataAccess.html
URL: http://svn.apache.org/viewvc/sis/site/trunk/book/fr/overview/DataAccess.html?rev=1814422&r1=1814421&r2=1814422&view=diff
==============================================================================
--- sis/site/trunk/book/fr/overview/DataAccess.html (original)
+++ sis/site/trunk/book/fr/overview/DataAccess.html Mon Nov  6 16:04:36 2017
@@ -39,14 +39,14 @@
         Bien qu’il soit possible de créer des structures de données programmatiquement en mémoire,
         le plus souvent les données sont lues à partir de fichiers ou autres types d’entrepôts.
         Il y a plusieurs moyens d’accéder à ces données, mais une façon pratique est d’utiliser
-        la méthode de commodité <code class="sis">DataStores.open(Object)</code>.
+        la méthode de commodité <code class="SIS">DataStores.open(Object)</code>.
         L’argument donné à cette méthode peut être un chemin vers un fichier
         (<code>File</code>, <code>Path</code>, <code>URL</code>, <code>URI</code>),
         un flux d’entrée vers un fichier déjà ouvert
         (<code>Channel</code>, <code>DataInput</code>, <code>InputStream</code>, <code>Reader</code>),
         une connexion à une base de données (<code>DataSource</code>, <code>Connection</code>)
         ou d’autres types d’objets spécifiques à la source de données.
-        La méthode <code class="sis">DataStores.open(Object)</code> se charge de détecter le format de données
+        La méthode <code class="SIS">DataStores.open(Object)</code> se charge de détecter le format de données
         et retourne une instance de <code>DataStore</code> pouvant le lire.
       </p>
       <p>

Modified: sis/site/trunk/book/fr/referencing/CoordinateOperations.html
URL: http://svn.apache.org/viewvc/sis/site/trunk/book/fr/referencing/CoordinateOperations.html?rev=1814422&r1=1814421&r2=1814422&view=diff
==============================================================================
--- sis/site/trunk/book/fr/referencing/CoordinateOperations.html [UTF-8] (original)
+++ sis/site/trunk/book/fr/referencing/CoordinateOperations.html [UTF-8] Mon Nov  6 16:04:36 2017
@@ -162,73 +162,61 @@ public class MyApp {
         sous forme d’une matrice colonne (la raison sera plus claire bientôt):
       </p>
 
-      <table class="hidden">
-        <tr>
-          <th>Équation</th>
-          <th>Code Java</th>
-        </tr>
-        <tr>
-          <td style="vertical-align:middle; min-width:350px; padding-right:60px">
-            <math xmlns="http://www.w3.org/1998/Math/MathML" display="block" alttext="MathML capable browser required">
-              <mi>P</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo>
-              <mo>=</mo>
-              <mfenced open="[" close="]">
-                <mtable>
-                  <mtr><mtd><mi>x</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mtd></mtr>
-                  <mtr><mtd><mi>y</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mtd></mtr>
-                </mtable>
-              </mfenced>
-            </math>
-          </td>
-          <td style="vertical-align:middle; min-width:500px; padding-left:60px">
-
+      <div class="row-of-boxes">
+        <div style="min-width:350px; padding-right:60px">
+          <div class="caption">Équation</div>
+          <math xmlns="http://www.w3.org/1998/Math/MathML" display="block" alttext="MathML capable browser required">
+            <mi>P</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo>
+            <mo>=</mo>
+            <mfenced open="[" close="]">
+              <mtable>
+                <mtr><mtd><mi>x</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mtd></mtr>
+                <mtr><mtd><mi>y</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mtd></mtr>
+              </mtable>
+            </mfenced>
+          </math>
+        </div>
+        <div style="min-width:500px; padding-left:60px">
+          <div class="caption">Code Java</div>
 <pre style="margin:0"><code>DirectPosition geographic = new DirectPosition2D(<var>φ</var>, <var>λ</var>);
 DirectPosition projected = <var><b>P</b></var>.transform(geographic, null);
 double <var>x</var> = projected.getOrdinate(0);
 double <var>y</var> = projected.getOrdinate(1);</code></pre>
-
-          </td>
-        </tr>
-      </table>
+        </div>
+      </div>
 
       <p>La dérivée de la projection cartographique en ce même point peut se représenter par une matrice Jacobienne:</p>
 
-      <table class="hidden">
-        <tr>
-          <th>Équation</th>
-          <th>Code Java</th>
-        </tr>
-        <tr>
-          <td style="vertical-align:middle; min-width:350px; padding-right:60px">
-            <math xmlns="http://www.w3.org/1998/Math/MathML" display="block" alttext="MathML capable browser required">
-              <msup><mi>P</mi><mo>′</mo></msup><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo>
-              <mo>=</mo>
-              <msub><mi>JAC</mi><mrow><mi>P</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow></msub>
-              <mo>=</mo>
-              <mfenced open="[" close="]">
-                <mtable>
-                  <mtr>
-                    <mtd><mfrac><mrow><mo>∂</mo><mi>x</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>φ</mi></mrow></mfrac></mtd>
-                    <mtd><mfrac><mrow><mo>∂</mo><mi>x</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>λ</mi></mrow></mfrac></mtd>
-                  </mtr>
-                  <mtr>
-                    <mtd><mfrac><mrow><mo>∂</mo><mi>y</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>φ</mi></mrow></mfrac></mtd>
-                    <mtd><mfrac><mrow><mo>∂</mo><mi>y</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>λ</mi></mrow></mfrac></mtd>
-                  </mtr>
-                </mtable>
-              </mfenced>
-            </math>
-          </td>
-          <td style="vertical-align:middle; min-width:500px; padding-left:60px">
-
+      <div class="row-of-boxes">
+        <div style="min-width:350px; padding-right:60px">
+          <div class="caption">Équation</div>
+          <math xmlns="http://www.w3.org/1998/Math/MathML" display="block" alttext="MathML capable browser required">
+            <msup><mi>P</mi><mo>′</mo></msup><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo>
+            <mo>=</mo>
+            <msub><mi>JAC</mi><mrow><mi>P</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow></msub>
+            <mo>=</mo>
+            <mfenced open="[" close="]">
+              <mtable>
+                <mtr>
+                  <mtd><mfrac><mrow><mo>∂</mo><mi>x</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>φ</mi></mrow></mfrac></mtd>
+                  <mtd><mfrac><mrow><mo>∂</mo><mi>x</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>λ</mi></mrow></mfrac></mtd>
+                </mtr>
+                <mtr>
+                  <mtd><mfrac><mrow><mo>∂</mo><mi>y</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>φ</mi></mrow></mfrac></mtd>
+                  <mtd><mfrac><mrow><mo>∂</mo><mi>y</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo></mrow><mrow><mo>∂</mo><mi>λ</mi></mrow></mfrac></mtd>
+                </mtr>
+              </mtable>
+            </mfenced>
+          </math>
+        </div>
+        <div style="min-width:500px; padding-left:60px">
+          <div class="caption">Code Java</div>
 <pre style="margin:0"><code>DirectPosition geographic = new DirectPosition2D(<var>φ</var>, <var>λ</var>);
 Matrix jacobian = <var><b>P</b></var>.derivative(geographic);
 double dx_dλ = jacobian.getElement(0,1);
 double dy_dφ = jacobian.getElement(1,0);</code></pre>
-
-          </td>
-        </tr>
-      </table>
+        </div>
+      </div>
 
       <p>
         Les équations suivantes dans cette section abrégeront
@@ -249,9 +237,10 @@ double dy_dφ = jacobian.getElement(1,0)
         la première et deuxième colonne des matrices Jacobiennes.
       </p>
 
-      <table class="hidden"><tr>
-        <td><img style="border: solid 1px" src="../../../content/book/images/Derivatives.png" alt="Exemple de dérivées d’une projection cartographique"/></td>
-        <td style="padding-left: 30px; vertical-align: middle">
+      <div class="row-of-boxes">
+        <div>
+          <img style="border: solid 1px" src="../../../content/book/images/Derivatives.png" alt="Exemple de dérivées d’une projection cartographique"/>
+        </div><div>
           <p>où les vecteurs sont reliés à la matrice par:</p>
           <math xmlns="http://www.w3.org/1998/Math/MathML" display="block" alttext="MathML capable browser required">
             <mtable><mtr>
@@ -284,8 +273,8 @@ double dy_dφ = jacobian.getElement(1,0)
               </mtd>
             </mtr></mtable>
           </math>
-        </td>
-      </tr></table>
+        </div>
+      </div>
 
       <p>
         Cette figure nous montre déjà une utilisation possible des dérivées:
@@ -305,16 +294,15 @@ double dy_dφ = jacobian.getElement(1,0)
         car la surface en bas de la forme est plus basse que les 2 coins du bas.
         Cette surface serait donc en dehors du rectangle.
       </p>
-      <table class="hidden">
-        <tr>
-          <th>Enveloppe avant la projection</th>
-          <th>Forme géométrique après la projection</th>
-        </tr>
-        <tr>
-          <td><img style="border: solid 1px; margin-right: 15px" src="../../../content/book/images/GeographicArea.png" alt="Envelope in a geographic CRS"/></td>
-          <td><img style="border: solid 1px; margin-left:  15px" src="../../../content/book/images/ConicArea.png" alt="Shape in a projected CRS"/></td>
-        </tr>
-      </table>
+      <div class="row-of-boxes">
+        <div>
+          <div class="caption">Enveloppe avant la projection</div>
+          <img style="border: solid 1px; margin-right: 15px" src="../../../content/book/images/GeographicArea.png" alt="Enveloppe dans un CRS géographique"/>
+        </div><div>
+          <div class="caption">Forme géométrique après la projection</div>
+          <img style="border: solid 1px; margin-left:  15px" src="../../../content/book/images/ConicArea.png" alt="Forme géométrique dans un CRS projeté"/>
+        </div>
+      </div>
       <p>
         Une façon simple d’atténuer le problème est d’échantillonner un plus grand nombre de points sur chacun des
         bords de la forme géométrique. On trouve ainsi des bibliothèques de <abbr>SIG</abbr> qui vont par exemple
@@ -343,20 +331,22 @@ double dy_dφ = jacobian.getElement(1,0)
         En supposant que la longitude du minimum de la courbe cubique est proche de la longitude du minimum de la courbe réelle,
         il suffit de calculer la projection cartographique d’un point à cette longitude plutôt que d’échantillonner 40 points sur le bord de l’enveloppe.
       </p>
-      <table class="hidden"><tr><td>
-        <img src="../../../content/book/images/Approximation.png" alt="Approximation cubique d’un bord d’une enveloppe"/>
-      </td><td style="padding-left: 60px">
-        Légende:
-        <ul>
-          <li><b>En bleue:</b> la forme géométrique correspondant à la projection de l’enveloppe.
-            C’est la forme dont on souhaite avoir le rectangle englobant.</li>
-          <li><b>En rouge</b> (sous les hachures): L’approximation
-            <var>y</var> = <var>C</var>₀ + <var>C</var>₁λ + <var>C</var>₂λ² + <var>C</var>₃λ³.</li>
-          <li><b>En vert</b> (pointillés): La position λ<sub>m</sub> du minimum de l’approximation, trouvée en résolvant
-            0 = <var>C</var>₁ + 2<var>C</var>₂λ<sub>m</sub> + 3<var>C</var>₃λ<sub>m</sub>².
-            Il peut y avoir jusqu’à deux minimums pour une même courbe cubique.</li>
-        </ul>
-      </td></tr></table>
+      <div class="row-of-boxes">
+        <div>
+          <img src="../../../content/book/images/Approximation.png" alt="Approximation cubique d’un bord d’une enveloppe"/>
+        </div><div>
+          Légende:
+          <ul>
+            <li><b>En bleue:</b> la forme géométrique correspondant à la projection de l’enveloppe.
+              C’est la forme dont on souhaite avoir le rectangle englobant.</li>
+            <li><b>En rouge</b> (sous les hachures): L’approximation
+              <var>y</var> = <var>C</var>₀ + <var>C</var>₁λ + <var>C</var>₂λ² + <var>C</var>₃λ³.</li>
+            <li><b>En vert</b> (pointillés): La position λ<sub>m</sub> du minimum de l’approximation, trouvée en résolvant
+              0 = <var>C</var>₁ + 2<var>C</var>₂λ<sub>m</sub> + 3<var>C</var>₃λ<sub>m</sub>².
+              Il peut y avoir jusqu’à deux minimums pour une même courbe cubique.</li>
+          </ul>
+        </div>
+      </div>
       <p>
         Dans la pratique Apache <abbr>SIS</abbr> utilise 8 points, soit les 4 coins plus un point au centre de chaque bord du rectangle à projeter,
         afin de réduire le risque d’erreur qu’induirait une courbe trop tordue entre deux points.
@@ -388,15 +378,13 @@ double dy_dφ = jacobian.getElement(1,0)
         La position obtenue ne sera pas nécessairement au centre du pixel de l’image source, ce qui implique qu’une interpolation de la valeur
         (ou de la couleur dans l’image ci-dessous) peut être nécessaire.
       </p>
-      <table class="hidden">
-        <tr>
-          <th style="text-align: left">Image source</th>
-          <th style="text-align: right">Image destination</th>
-        </tr>
-        <tr>
-          <td colspan="2"><img src="../../../content/book/images/RasterProjection.png" alt="Intersection of derivatives"/></td>
-        </tr>
-      </table>
+      <div style="display:flex; flex-direction:column; align-items:center">
+        <div style="display:flex; justify-content:space-between; width:564px">
+          <div class="caption">Image source</div>
+          <div class="caption">Image destination</div>
+        </div>
+        <img src="../../../content/book/images/RasterProjection.png" alt="Reprojection d’images"/>
+      </div>
       <p>
         Toutefois, calculer la projection inverse pour chacun des pixels peut être relativement lent.
         Afin d’accélérer les calculs, on utilise parfois une <cite>grille d’interpolation</cite>
@@ -411,23 +399,25 @@ double dy_dφ = jacobian.getElement(1,0)
         (la différence entre une position interpolée et la position réelle) ne dépasse pas un certain seuil (par exemple ¼ de pixel).
         On peut procéder en commençant par une grille de taille 3×3, puis en augmentant le nombre de points de manière itérative:
       </p>
-      <table class="hidden"><tr>
-        <td><img src="../../../content/book/images/WarpGrid.png" alt="Intersection of derivatives"/></td>
-        <td style="padding-left: 60px">
-        Légende:
-        <ul>
-          <li><b>Points bleus:</b>  première itération (9 points).</li>
-          <li><b>Points verts:</b>   seconde itération (25 points, dont 16 nouveaux).</li>
-          <li><b>Points rouges:</b> troisième itération (81 points, dont 56 nouveaux).</li>
-        </ul>
-        Si l’on continue…
-        <ul>
-          <li>Quatrième itération: 289 points, dont 208 nouveaux.</li>
-          <li>Cinquième itération: 1089 points, dont 800 nouveaux.</li>
-          <li>Sixième itération: 4225 points, dont 3136 nouveaux.</li>
-          <li>…</li>
-        </ul>
-      </td></tr></table>
+      <div class="row-of-boxes">
+        <div>
+          <img src="../../../content/book/images/WarpGrid.png" alt="Warp grid"/>
+        </div><div>
+          Légende:
+          <ul>
+            <li><b>Points bleus:</b>  première itération (9 points).</li>
+            <li><b>Points verts:</b>   seconde itération (25 points, dont 16 nouveaux).</li>
+            <li><b>Points rouges:</b> troisième itération (81 points, dont 56 nouveaux).</li>
+          </ul>
+          Si l’on continue…
+          <ul>
+            <li>Quatrième itération: 289 points, dont 208 nouveaux.</li>
+            <li>Cinquième itération: 1089 points, dont 800 nouveaux.</li>
+            <li>Sixième itération: 4225 points, dont 3136 nouveaux.</li>
+            <li>…</li>
+          </ul>
+        </div>
+      </div>
       <p>
         L’itération s’arrête lorsque, après avoir calculé de nouveaux points, on a vérifié que la différence entre les
         coordonnées projetées et les coordonnées interpolées de ces nouveaux points est inférieure au seuil qu’on s’est fixé.

Modified: sis/site/trunk/book/fr/storage/XML-ISO-19115.html
URL: http://svn.apache.org/viewvc/sis/site/trunk/book/fr/storage/XML-ISO-19115.html?rev=1814422&r1=1814421&r2=1814422&view=diff
==============================================================================
--- sis/site/trunk/book/fr/storage/XML-ISO-19115.html [UTF-8] (original)
+++ sis/site/trunk/book/fr/storage/XML-ISO-19115.html [UTF-8] Mon Nov  6 16:04:36 2017
@@ -148,14 +148,9 @@
         alors que la partie droite référence cet élément:
       </p>
 
-      <table class="hidden">
-        <tr>
-          <th>Définir un identifiant</th>
-          <th>Utiliser l’identifiant défini</th>
-        </tr>
-        <tr>
-          <td>
-
+      <div class="row-of-boxes">
+        <div>
+          <div class="caption">Définir un identifiant</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;MD_MetaData&gt;
   &lt;identificationInfo&gt;
     &lt;MD_DataIdentification id="<b>mon_id</b>"&gt;
@@ -163,16 +158,14 @@
     &lt;/MD_DataIdentification&gt;
   &lt;/identificationInfo&gt;
 &lt;/MD_MetaData&gt;</samp></pre>
-
-          </td><td>
-
+        </div>
+        <div>
+          <div class="caption">Utiliser l’identifiant défini</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;MD_MetaData&gt;
   &lt;identificationInfo xlink:href="<b>#mon_id</b>"/&gt;
 &lt;/MD_MetaData&gt;</samp></pre>
-
-          </td>
-        </tr>
-      </table>
+        </div>
+      </div>
 
       <p>
         Le choix de l’attribut à utiliser dépend de la portée de l’élément référencé:
@@ -255,13 +248,9 @@ public class MyClass {
         et dont la méthode <code class="SIS">getNilReason()</code> retournera la constante <code class="SIS">UNKNOWN</code>.
       </p>
 
-      <table class="hidden">
-        <tr>
-          <th>Information présente</th>
-          <th>Information absente</th>
-        </tr>
-        <tr>
-          <td>
+      <div class="row-of-boxes">
+        <div>
+          <div class="caption">Information présente</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;CI_Citation&gt;
   &lt;series&gt;
     &lt;CI_Series&gt;
@@ -269,16 +258,14 @@ public class MyClass {
     &lt;/CI_Series&gt;
   &lt;/series&gt;
 &lt;/CI_Citation&gt;</samp></pre>
-
-          </td><td>
-
+        </div>
+        <div>
+          <div class="caption">Information absente</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;CI_Citation&gt;
   &lt;series nilReason="unknown"/&gt;
 &lt;/CI_Citation&gt;</samp></pre>
-
-          </td>
-        </tr>
-      </table>
+        </div>
+      </div>
     </section>
   </body>
 </html>

Modified: sis/site/trunk/book/fr/utility/Internationalization.html
URL: http://svn.apache.org/viewvc/sis/site/trunk/book/fr/utility/Internationalization.html?rev=1814422&r1=1814421&r2=1814422&view=diff
==============================================================================
--- sis/site/trunk/book/fr/utility/Internationalization.html [UTF-8] (original)
+++ sis/site/trunk/book/fr/utility/Internationalization.html [UTF-8] Mon Nov  6 16:04:36 2017
@@ -158,23 +158,18 @@
         généralement utiliser la boucle de droite:
       </p>
 
-      <table class="hidden">
-        <tr>
-          <th>Boucle à éviter</th>
-          <th>Boucle recommandée</th>
-          <th>Exemples de caractères supplémentaires</th>
-        </tr>
-        <tr>
-          <td>
+      <div class="row-of-boxes">
+        <div>
+          <div class="caption">Boucle à éviter</div>
 <pre style="margin-top: 6pt"><code>for (int i=0; i&lt;string.length(); i++) {
     char c = string.charAt(i);
     if (Character.isWhitespace(c)) {
         // Un espace blanc a été trouvé.
     }
 }</code></pre>
-
-          </td><td>
-
+        </div>
+        <div>
+          <div class="caption">Boucle recommandée</div>
 <pre style="margin-top: 6pt"><code>for (int i=0; i&lt;string.length();) {
     int c = string.codePointAt(i);
     if (Character.isWhitespace(c)) {
@@ -182,14 +177,14 @@
     }
     i += Character.charCount(c);
 }</code></pre>
-
-          </td><td>
+        </div>
+        <div>
+          <div class="caption">Exemples de caractères supplémentaires</div>
             <center>(l’affichage dépend des capacités du navigateur)</center>
             <p style="font-size: 40px">&#x1F689; &#x1F6A5; &#x1F6A7; &#x1F6AB;
               &#x1F6AF; &#x1F6B8; &#x1F6BA; &#x1F6B9; &#x1F6C4; &#x1F6AD;</p>
-          </td>
-        </tr>
-      </table>
+        </div>
+      </div>
 
       <p>
         <abbr>SIS</abbr> supporte les caractères supplémentaires en utilisant la boucle de droite lorsque nécessaire.

Modified: sis/site/trunk/content/book/book.css
URL: http://svn.apache.org/viewvc/sis/site/trunk/content/book/book.css?rev=1814422&r1=1814421&r2=1814422&view=diff
==============================================================================
--- sis/site/trunk/content/book/book.css (original)
+++ sis/site/trunk/content/book/book.css Mon Nov  6 16:04:36 2017
@@ -205,27 +205,21 @@ table tr td.separator {
   padding-bottom:      6px;
 }
 
-table.hidden {
-  border-style: none;
+div.caption {
+  margin:      6px;
+  text-align:  center;
+  font-weight: bold;
+  font-family: sans-serif;
 }
 
-table.hidden tr {
-  vertical-align: top;
+div.row-of-boxes {
+  display:         flex;
+  align-items:     flex-start;
+  justify-content: center;
 }
 
-table.hidden tr th {
-  border-style:   none;
-  background:     none;
-  font-family:    sans-serif;
-  font-weight:    bold;
-  padding-top:    12px;
-  padding-bottom: 6px;
-  padding-left:   0;
-  padding-right:  0;
-}
-
-table.hidden tr td {
-  padding: 0;
+div.row-of-boxes > div {
+  padding: 6px 30px;
 }
 
 pre {

Modified: sis/site/trunk/content/book/en/developer-guide.html
URL: http://svn.apache.org/viewvc/sis/site/trunk/content/book/en/developer-guide.html?rev=1814422&r1=1814421&r2=1814422&view=diff
==============================================================================
--- sis/site/trunk/content/book/en/developer-guide.html [UTF-8] (original)
+++ sis/site/trunk/content/book/en/developer-guide.html [UTF-8] Mon Nov  6 16:04:36 2017
@@ -739,13 +739,13 @@ Text in gray boxes are for information p
 It is possible to instantiate data structures programmatically in memory.
 But more often, data are read from files or other kinds of data stores.
 There is different ways to access those data, but an easy way is to use
-the <code class="sis">DataStores​.open(Object)</code> convenience method.
+the <code class="SIS">DataStores​.open(Object)</code> convenience method.
 The method argument can be a path to a data file
 (<code>File</code>, <code>Path</code>, <code>URL</code>, <code>URI</code>), a stream
 (<code>Channel</code>, <code>DataInput</code>, <code>InputStream</code>, <code>Reader</code>),
 a connection to a data base (<code>DataSource</code>, <code>Connection</code>)
 or other kinds of object specific to the data source.
-The <code class="sis">DataStores​.open(Object)</code> method detects data formats
+The <code class="SIS">DataStores​.open(Object)</code> method detects data formats
 and returns a <code class="SIS">DataStore</code> instance for that format.
 </p>
 <p>
@@ -1574,13 +1574,9 @@ The formula below represents the map pro
 (reason will become clearer soon):
 </p>
 
-<table class="hidden">
-<tr>
-<th>Equation</th>
-<th>Java code</th>
-</tr>
-<tr>
-<td style="vertical-align:middle; min-width:350px; padding-right:60px">
+<div class="row-of-boxes">
+<div style="min-width:350px; padding-right:60px">
+<div class="caption">Equation</div>
 <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="MathML capable browser required" display="block">
 <mi>P</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo>
 <mo>=</mo>
@@ -1591,27 +1587,21 @@ The formula below represents the map pro
 </mtable>
 </mfenced>
 </math>
-</td>
-<td style="vertical-align:middle; min-width:500px; padding-left:60px">
-
+</div>
+<div style="min-width:500px; padding-left:60px">
+<div class="caption">Java code</div>
 <pre style="margin:0"><code><code class="GeoAPI">DirectPosition</code> geographic = <b>new</b> DirectPosition2D(<var>φ</var>, <var>λ</var>);
 <code class="GeoAPI">DirectPosition</code> projected = <var><b>P</b></var>.transform(geographic, <b>null</b>);
 <b>double</b> <var>x</var> = projected.getOrdinate(0);
 <b>double</b> <var>y</var> = projected.getOrdinate(1);</code></pre>
-
-</td>
-</tr>
-</table>
+</div>
+</div>
 
 <p>The map projection partial derivate at this point can be represented by a Jacobian matrix:</p>
 
-<table class="hidden">
-<tr>
-<th>Equation</th>
-<th>Java code</th>
-</tr>
-<tr>
-<td style="vertical-align:middle; min-width:350px; padding-right:60px">
+<div class="row-of-boxes">
+<div style="min-width:350px; padding-right:60px">
+<div class="caption">Equation</div>
 <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="MathML capable browser required" display="block">
 <msup><mi>P</mi><mo>′</mo></msup><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo>
 <mo>=</mo>
@@ -1630,17 +1620,15 @@ The formula below represents the map pro
 </mtable>
 </mfenced>
 </math>
-</td>
-<td style="vertical-align:middle; min-width:500px; padding-left:60px">
-
+</div>
+<div style="min-width:500px; padding-left:60px">
+<div class="caption">Java code</div>
 <pre style="margin:0"><code><code class="GeoAPI">DirectPosition</code> geographic = <b>new</b> DirectPosition2D(<var>φ</var>, <var>λ</var>);
 <code class="GeoAPI">Matrix</code> jacobian = <var><b>P</b></var>.derivative(geographic);
 <b>double</b> dx_dλ = jacobian.getElement(0,1);
 <b>double</b> dy_dφ = jacobian.getElement(1,0);</code></pre>
-
-</td>
-</tr>
-</table>
+</div>
+</div>
 
 <p>
 Remaining equations in this section will abridge
@@ -1660,9 +1648,10 @@ In that figure, vectors <var>U</var> et
 in the Jacobian matrices.
 </p>
 
-<table class="hidden"><tr>
-<td><img alt="Example of a map projection derivative" src="../images/Derivatives.png" style="border: solid 1px"/></td>
-<td style="padding-left: 30px; vertical-align: middle">
+<div class="row-of-boxes">
+<div>
+<img alt="Example of a map projection derivative" src="../images/Derivatives.png" style="border: solid 1px"/>
+</div><div>
 <p>where vectors are related to the matrix by:</p>
 <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="MathML capable browser required" display="block">
 <mtable><mtr>
@@ -1695,8 +1684,8 @@ in the Jacobian matrices.
 </mtd>
 </mtr></mtable>
 </math>
-</td>
-</tr></table>
+</div>
+</div>
 
 <p>
 Above figure shows one usage of map projection derivatives:
@@ -1709,22 +1698,22 @@ But the usefulness of map projection der
 <p>
 <span style="color: red">TODO</span>
 </p>
-<table class="hidden">
-<tr>
-<th>Envelope before projection</th>
-<th>Geometric shape after projection</th>
-</tr>
-<tr>
-<td><img alt="Envelope in a geographic CRS" src="../images/GeographicArea.png" style="border: solid 1px; margin-right: 15px"/></td>
-<td><img alt="Shape in a projected CRS" src="../images/ConicArea.png" style="border: solid 1px; margin-left:  15px"/></td>
-</tr>
-</table>
+<div class="row-of-boxes">
+<div>
+<div class="caption">Envelope before projection</div>
+<img alt="Envelope in a geographic CRS" src="../images/GeographicArea.png" style="border: solid 1px; margin-right: 15px"/>
+</div><div>
+<div class="caption">Geometric shape after projection</div>
+<img alt="Shape in a projected CRS" src="../images/ConicArea.png" style="border: solid 1px; margin-left:  15px"/>
+</div>
+</div>
 <p>
 <span style="color: red">TODO</span>
 </p>
-<table class="hidden"><tr><td>
+<div class="row-of-boxes">
+<div>
 <img alt="Cubic approximation of an envelope bounds" src="../images/Approximation.png"/>
-</td><td style="padding-left: 60px">
+</div><div>
 Legend:
 <ul>
 <li><b>Blue:</b> the geometric shape of the envelope after projection.
@@ -1735,7 +1724,8 @@ This is the shape from which to get a ne
 0 = <var>C</var>₁ + 2<var>C</var>₂λ<sub>m</sub> + 3<var>C</var>₃λ<sub>m</sub>².
 The same cubic line can have two minimums.</li>
 </ul>
-</td></tr></table>
+</div>
+</div>
 <p>
 <span style="color: red">TODO</span>
 </p>
@@ -1745,21 +1735,20 @@ The same cubic line can have two minimum
 <p>
 <span style="color: red">TODO</span>
 </p>
-<table class="hidden">
-<tr>
-<th style="text-align: left">Source image</th>
-<th style="text-align: right">Destination image</th>
-</tr>
-<tr>
-<td colspan="2"><img alt="Intersection of derivatives" src="../images/RasterProjection.png"/></td>
-</tr>
-</table>
+<div style="display:flex; flex-direction:column; align-items:center">
+<div style="display:flex; justify-content:space-between; width:564px">
+<div class="caption">Source image</div>
+<div class="caption">Destination image</div>
+</div>
+<img alt="Raster reprojection" src="../images/RasterProjection.png"/>
+</div>
 <p>
 <span style="color: red">TODO</span>
 </p>
-<table class="hidden"><tr>
-<td><img alt="Intersection of derivatives" src="../images/WarpGrid.png"/></td>
-<td style="padding-left: 60px">
+<div class="row-of-boxes">
+<div>
+<img alt="Warp grid" src="../images/WarpGrid.png"/>
+</div><div>
 Legend:
 <ul>
 <li><b>Blue dots:</b>  first  iteration (9 points).</li>
@@ -1773,7 +1762,8 @@ Continuing…
 <li>Sixth iteration: 4225 points, including 3136 news.</li>
 <li>…</li>
 </ul>
-</td></tr></table>
+</div>
+</div>
 <p>
 <span style="color: red">TODO</span>
 </p>
@@ -2253,14 +2243,9 @@ In the following example, the part on th
 while the part on the right references this element:
 </p>
 
-<table class="hidden">
-<tr>
-<th>Defining an Identifier</th>
-<th>Using a Defined Identifier</th>
-</tr>
-<tr>
-<td>
-
+<div class="row-of-boxes">
+<div>
+<div class="caption">Defining an identifier</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;MD_MetaData&gt;
   &lt;identificationInfo&gt;
     &lt;MD_DataIdentification id=<i>"<b>my_id</b>"</i>&gt;
@@ -2268,16 +2253,14 @@ while the part on the right references t
     &lt;/MD_DataIdentification&gt;
   &lt;/identificationInfo&gt;
 &lt;/MD_MetaData&gt;</samp></pre>
-
-</td><td>
-
+</div>
+<div>
+<div class="caption">Using a defined identifier</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;MD_MetaData&gt;
   &lt;identificationInfo xlink:href=<i>"<b>#my_id</b>"</i>/&gt;
 &lt;/MD_MetaData&gt;</samp></pre>
-
-</td>
-</tr>
-</table>
+</div>
+</div>
 
 <p>
 The decision of which attribute to use depends on the scope of the referenced item:
@@ -2358,14 +2341,9 @@ But when a <code class="OGC">nilReason</
 <code class="SIS">getNilReason()</code> method returns the constant <code class="SIS">UNKNOWN</code>.
 </p>
 
-<table class="hidden">
-<tr>
-<th>Information Included</th>
-<th>Missing Information</th>
-</tr>
-<tr>
-<td>
-
+<div class="row-of-boxes">
+<div>
+<div class="caption">Information included</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;CI_Citation&gt;
   &lt;series&gt;
     &lt;CI_Series&gt;
@@ -2373,16 +2351,14 @@ But when a <code class="OGC">nilReason</
     &lt;/CI_Series&gt;
   &lt;/series&gt;
 &lt;/CI_Citation&gt;</samp></pre>
-
-</td><td>
-
+</div>
+<div>
+<div class="caption">Missing information</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;CI_Citation&gt;
   &lt;series nilReason=<i>"unknown"</i>/&gt;
 &lt;/CI_Citation&gt;</samp></pre>
-
-</td>
-</tr>
-</table>
+</div>
+</div>
 </section>
 </section>
 </section>
@@ -2695,24 +2671,18 @@ where we may assume a direct corresponde
 Thus, instead of the loop on the left below, international applications must generally use the loop on the right:
 </p>
 
-<table class="hidden">
-<tr>
-<th>Loop to Avoid</th>
-<th>Recommended loop</th>
-<th>Supplementary character examples</th>
-</tr>
-<tr>
-<td>
-
+<div class="row-of-boxes">
+<div>
+<div class="caption">Loop to Avoid</div>
 <pre style="margin-top: 6pt"><code><b>for</b> (<b>int</b> i=0; i&lt;string.length(); i++) {
     <b>char</b> c = string.charAt(i);
     <b>if</b> (Character.isWhitespace(c)) {
         <code class="comment">// A blank space was found.
 </code>    }
 }</code></pre>
-
-</td><td>
-
+</div>
+<div>
+<div class="caption">Recommended loop</div>
 <pre style="margin-top: 6pt"><code><b>for</b> (<b>int</b> i=0; i&lt;string.length();) {
     <b>int</b> c = string.codePointAt(i);
     <b>if</b> (Character.isWhitespace(c)) {
@@ -2720,14 +2690,14 @@ Thus, instead of the loop on the left be
 </code>    }
     i += Character.charCount(c);
 }</code></pre>
-
-</td><td>
+</div>
+<div>
+<div class="caption">Supplementary character examples</div>
 <center>(rendering depends on browser capabilities)</center>
 <p style="font-size: 40px">&#128649; &#128677; &#128679; &#128683;
 &#128687; &#128696; &#128698; &#128697; &#128708; &#128685;</p>
-</td>
-</tr>
-</table>
+</div>
+</div>
 
 <p>
 <abbr title="Spatial Information System">SIS</abbr> supports supplementary characters by using the loop on the right where necessary,
@@ -3735,13 +3705,18 @@ Note that when affine transform concaten
 <var>A</var>×<var>B</var>×<var>C</var> is equivalent to first applying operation <var>C</var>,
 then operation <var>B</var> and finally operation <var>A</var>.
 </p>
-<table class="hidden"><tr>
-<th>Change 2</th><th/>
-<th>Change 1</th><th/>
-<th>Initial conversion</th><th/>
-<th>Concatenated operation</th>
-</tr><tr>
-<td style="vertical-align: middle">
+<div style="display:table; margin:auto">
+<div style="display:table-row">
+<div class="caption" style="display:table-cell">Change 2</div>
+<div class="caption" style="display:table-cell"> </div>
+<div class="caption" style="display:table-cell">Change 1</div>
+<div class="caption" style="display:table-cell"> </div>
+<div class="caption" style="display:table-cell">Initial conversion</div>
+<div class="caption" style="display:table-cell"> </div>
+<div class="caption" style="display:table-cell">Concatenated operation</div>
+</div>
+<div style="display:table-row">
+<div style="display:table-cell; vertical-align:middle">
 <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="MathML capable browser required" display="block">
 <mfenced close="]" open="[">
 <mtable>
@@ -3763,9 +3738,9 @@ then operation <var>B</var> and finally
 </mtable>
 </mfenced>
 </math>
-</td>
-<td style="vertical-align: middle; padding-left: 15px; padding-right: 15px">×</td>
-<td style="vertical-align: middle">
+</div>
+<div style="display:table-cell; vertical-align:middle; padding-left: 15px; padding-right: 15px">×</div>
+<div style="display:table-cell; vertical-align:middle">
 <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
 <mfenced close="]" open="[">
 <mtable>
@@ -3787,9 +3762,9 @@ then operation <var>B</var> and finally
 </mtable>
 </mfenced>
 </math>
-</td>
-<td style="vertical-align: middle; padding-left: 15px; padding-right: 15px">×</td>
-<td style="vertical-align: middle">
+</div>
+<div style="display:table-cell; vertical-align:middle; padding-left: 15px; padding-right: 15px">×</div>
+<div style="display:table-cell; vertical-align:middle">
 <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
 <mfenced close="]" open="[">
 <mtable>
@@ -3825,9 +3800,9 @@ then operation <var>B</var> and finally
 </mtable>
 </mfenced>
 </math>
-</td>
-<td style="vertical-align: middle; padding-left: 15px; padding-right: 15px">=</td>
-<td style="vertical-align: middle">
+</div>
+<div style="display:table-cell; vertical-align:middle; padding-left: 15px; padding-right: 15px">=</div>
+<div style="display:table-cell; vertical-align:middle">
 <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
 <mfenced close="]" open="[">
 <mtable>
@@ -3863,8 +3838,9 @@ then operation <var>B</var> and finally
 </mtable>
 </mfenced>
 </math>
-</td>
-</tr></table>
+</div>
+</div>
+</div>
 <p>
 A key principle is that there is no need to write Java code dedicated to above kinds of axis changes.
 Those operations, and many other, can be handled by matrix algebra.

Modified: sis/site/trunk/content/book/fr/developer-guide.html
URL: http://svn.apache.org/viewvc/sis/site/trunk/content/book/fr/developer-guide.html?rev=1814422&r1=1814421&r2=1814422&view=diff
==============================================================================
--- sis/site/trunk/content/book/fr/developer-guide.html [UTF-8] (original)
+++ sis/site/trunk/content/book/fr/developer-guide.html [UTF-8] Mon Nov  6 16:04:36 2017
@@ -776,14 +776,14 @@ Le lecteur peut ignorer ces boîtes gris
 Bien qu’il soit possible de créer des structures de données programmatiquement en mémoire,
 le plus souvent les données sont lues à partir de fichiers ou autres types d’entrepôts.
 Il y a plusieurs moyens d’accéder à ces données, mais une façon pratique est d’utiliser
-la méthode de commodité <code class="sis">DataStores​.open(Object)</code>.
+la méthode de commodité <code class="SIS">DataStores​.open(Object)</code>.
 L’argument donné à cette méthode peut être un chemin vers un fichier
 (<code>File</code>, <code>Path</code>, <code>URL</code>, <code>URI</code>),
 un flux d’entrée vers un fichier déjà ouvert
 (<code>Channel</code>, <code>DataInput</code>, <code>InputStream</code>, <code>Reader</code>),
 une connexion à une base de données (<code>DataSource</code>, <code>Connection</code>)
 ou d’autres types d’objets spécifiques à la source de données.
-La méthode <code class="sis">DataStores​.open(Object)</code> se charge de détecter le format de données
+La méthode <code class="SIS">DataStores​.open(Object)</code> se charge de détecter le format de données
 et retourne une instance de <code class="SIS">DataStore</code> pouvant le lire.
 </p>
 <p>
@@ -1624,13 +1624,9 @@ Dans l’expression ci-dessous, nous rep
 sous forme d’une matrice colonne (la raison sera plus claire bientôt):
 </p>
 
-<table class="hidden">
-<tr>
-<th>Équation</th>
-<th>Code Java</th>
-</tr>
-<tr>
-<td style="vertical-align:middle; min-width:350px; padding-right:60px">
+<div class="row-of-boxes">
+<div style="min-width:350px; padding-right:60px">
+<div class="caption">Équation</div>
 <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="MathML capable browser required" display="block">
 <mi>P</mi><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo>
 <mo>=</mo>
@@ -1641,27 +1637,21 @@ sous forme d’une matrice colonne (la r
 </mtable>
 </mfenced>
 </math>
-</td>
-<td style="vertical-align:middle; min-width:500px; padding-left:60px">
-
+</div>
+<div style="min-width:500px; padding-left:60px">
+<div class="caption">Code Java</div>
 <pre style="margin:0"><code><code class="GeoAPI">DirectPosition</code> geographic = <b>new</b> DirectPosition2D(<var>φ</var>, <var>λ</var>);
 <code class="GeoAPI">DirectPosition</code> projected = <var><b>P</b></var>.transform(geographic, <b>null</b>);
 <b>double</b> <var>x</var> = projected.getOrdinate(0);
 <b>double</b> <var>y</var> = projected.getOrdinate(1);</code></pre>
-
-</td>
-</tr>
-</table>
+</div>
+</div>
 
 <p>La dérivée de la projection cartographique en ce même point peut se représenter par une matrice Jacobienne:</p>
 
-<table class="hidden">
-<tr>
-<th>Équation</th>
-<th>Code Java</th>
-</tr>
-<tr>
-<td style="vertical-align:middle; min-width:350px; padding-right:60px">
+<div class="row-of-boxes">
+<div style="min-width:350px; padding-right:60px">
+<div class="caption">Équation</div>
 <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="MathML capable browser required" display="block">
 <msup><mi>P</mi><mo>′</mo></msup><mo>(</mo><mi>φ</mi><mo>,</mo><mi>λ</mi><mo>)</mo>
 <mo>=</mo>
@@ -1680,17 +1670,15 @@ sous forme d’une matrice colonne (la r
 </mtable>
 </mfenced>
 </math>
-</td>
-<td style="vertical-align:middle; min-width:500px; padding-left:60px">
-
+</div>
+<div style="min-width:500px; padding-left:60px">
+<div class="caption">Code Java</div>
 <pre style="margin:0"><code><code class="GeoAPI">DirectPosition</code> geographic = <b>new</b> DirectPosition2D(<var>φ</var>, <var>λ</var>);
 <code class="GeoAPI">Matrix</code> jacobian = <var><b>P</b></var>.derivative(geographic);
 <b>double</b> dx_dλ = jacobian.getElement(0,1);
 <b>double</b> dy_dφ = jacobian.getElement(1,0);</code></pre>
-
-</td>
-</tr>
-</table>
+</div>
+</div>
 
 <p>
 Les équations suivantes dans cette section abrégeront
@@ -1711,9 +1699,10 @@ Dans cette figure, les vecteurs <var>U</
 la première et deuxième colonne des matrices Jacobiennes.
 </p>
 
-<table class="hidden"><tr>
-<td><img alt="Exemple de dérivées d’une projection cartographique" src="../images/Derivatives.png" style="border: solid 1px"/></td>
-<td style="padding-left: 30px; vertical-align: middle">
+<div class="row-of-boxes">
+<div>
+<img alt="Exemple de dérivées d’une projection cartographique" src="../images/Derivatives.png" style="border: solid 1px"/>
+</div><div>
 <p>où les vecteurs sont reliés à la matrice par:</p>
 <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="MathML capable browser required" display="block">
 <mtable><mtr>
@@ -1746,8 +1735,8 @@ la première et deuxième colonne des ma
 </mtd>
 </mtr></mtable>
 </math>
-</td>
-</tr></table>
+</div>
+</div>
 
 <p>
 Cette figure nous montre déjà une utilisation possible des dérivées:
@@ -1767,16 +1756,15 @@ Construire une enveloppe rectangulaire q
 car la surface en bas de la forme est plus basse que les 2 coins du bas.
 Cette surface serait donc en dehors du rectangle.
 </p>
-<table class="hidden">
-<tr>
-<th>Enveloppe avant la projection</th>
-<th>Forme géométrique après la projection</th>
-</tr>
-<tr>
-<td><img alt="Envelope in a geographic CRS" src="../images/GeographicArea.png" style="border: solid 1px; margin-right: 15px"/></td>
-<td><img alt="Shape in a projected CRS" src="../images/ConicArea.png" style="border: solid 1px; margin-left:  15px"/></td>
-</tr>
-</table>
+<div class="row-of-boxes">
+<div>
+<div class="caption">Enveloppe avant la projection</div>
+<img alt="Enveloppe dans un CRS géographique" src="../images/GeographicArea.png" style="border: solid 1px; margin-right: 15px"/>
+</div><div>
+<div class="caption">Forme géométrique après la projection</div>
+<img alt="Forme géométrique dans un CRS projeté" src="../images/ConicArea.png" style="border: solid 1px; margin-left:  15px"/>
+</div>
+</div>
 <p>
 Une façon simple d’atténuer le problème est d’échantillonner un plus grand nombre de points sur chacun des
 bords de la forme géométrique. On trouve ainsi des bibliothèques de <abbr>SIG</abbr> qui vont par exemple
@@ -1805,9 +1793,10 @@ L’avantage est que la position du mini
 En supposant que la longitude du minimum de la courbe cubique est proche de la longitude du minimum de la courbe réelle,
 il suffit de calculer la projection cartographique d’un point à cette longitude plutôt que d’échantillonner 40 points sur le bord de l’enveloppe.
 </p>
-<table class="hidden"><tr><td>
+<div class="row-of-boxes">
+<div>
 <img alt="Approximation cubique d’un bord d’une enveloppe" src="../images/Approximation.png"/>
-</td><td style="padding-left: 60px">
+</div><div>
 Légende:
 <ul>
 <li><b>En bleue:</b> la forme géométrique correspondant à la projection de l’enveloppe.
@@ -1818,7 +1807,8 @@ C’est la forme dont on souhaite avoir
 0 = <var>C</var>₁ + 2<var>C</var>₂λ<sub>m</sub> + 3<var>C</var>₃λ<sub>m</sub>².
 Il peut y avoir jusqu’à deux minimums pour une même courbe cubique.</li>
 </ul>
-</td></tr></table>
+</div>
+</div>
 <p>
 Dans la pratique Apache <abbr title="Spatial Information System">SIS</abbr> utilise 8 points, soit les 4 coins plus un point au centre de chaque bord du rectangle à projeter,
 afin de réduire le risque d’erreur qu’induirait une courbe trop tordue entre deux points.
@@ -1850,15 +1840,13 @@ du pixel correspondant dans l’image so
 La position obtenue ne sera pas nécessairement au centre du pixel de l’image source, ce qui implique qu’une interpolation de la valeur
 (ou de la couleur dans l’image ci-dessous) peut être nécessaire.
 </p>
-<table class="hidden">
-<tr>
-<th style="text-align: left">Image source</th>
-<th style="text-align: right">Image destination</th>
-</tr>
-<tr>
-<td colspan="2"><img alt="Intersection of derivatives" src="../images/RasterProjection.png"/></td>
-</tr>
-</table>
+<div style="display:flex; flex-direction:column; align-items:center">
+<div style="display:flex; justify-content:space-between; width:564px">
+<div class="caption">Image source</div>
+<div class="caption">Image destination</div>
+</div>
+<img alt="Reprojection d’images" src="../images/RasterProjection.png"/>
+</div>
 <p>
 Toutefois, calculer la projection inverse pour chacun des pixels peut être relativement lent.
 Afin d’accélérer les calculs, on utilise parfois une <cite>grille d’interpolation</cite>
@@ -1873,9 +1861,10 @@ Mais une difficulté de cette approche e
 (la différence entre une position interpolée et la position réelle) ne dépasse pas un certain seuil (par exemple ¼ de pixel).
 On peut procéder en commençant par une grille de taille 3×3, puis en augmentant le nombre de points de manière itérative:
 </p>
-<table class="hidden"><tr>
-<td><img alt="Intersection of derivatives" src="../images/WarpGrid.png"/></td>
-<td style="padding-left: 60px">
+<div class="row-of-boxes">
+<div>
+<img alt="Warp grid" src="../images/WarpGrid.png"/>
+</div><div>
 Légende:
 <ul>
 <li><b>Points bleus:</b>  première itération (9 points).</li>
@@ -1889,7 +1878,8 @@ Si l’on continue…
 <li>Sixième itération: 4225 points, dont 3136 nouveaux.</li>
 <li>…</li>
 </ul>
-</td></tr></table>
+</div>
+</div>
 <p>
 L’itération s’arrête lorsque, après avoir calculé de nouveaux points, on a vérifié que la différence entre les
 coordonnées projetées et les coordonnées interpolées de ces nouveaux points est inférieure au seuil qu’on s’est fixé.
@@ -2183,14 +2173,9 @@ Dans l’exemple suivant, la partie gauc
 alors que la partie droite référence cet élément:
 </p>
 
-<table class="hidden">
-<tr>
-<th>Définir un identifiant</th>
-<th>Utiliser l’identifiant défini</th>
-</tr>
-<tr>
-<td>
-
+<div class="row-of-boxes">
+<div>
+<div class="caption">Définir un identifiant</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;MD_MetaData&gt;
   &lt;identificationInfo&gt;
     &lt;MD_DataIdentification id=<i>"<b>mon_id</b>"</i>&gt;
@@ -2198,16 +2183,14 @@ alors que la partie droite référence c
     &lt;/MD_DataIdentification&gt;
   &lt;/identificationInfo&gt;
 &lt;/MD_MetaData&gt;</samp></pre>
-
-</td><td>
-
+</div>
+<div>
+<div class="caption">Utiliser l’identifiant défini</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;MD_MetaData&gt;
   &lt;identificationInfo xlink:href=<i>"<b>#mon_id</b>"</i>/&gt;
 &lt;/MD_MetaData&gt;</samp></pre>
-
-</td>
-</tr>
-</table>
+</div>
+</div>
 
 <p>
 Le choix de l’attribut à utiliser dépend de la portée de l’élément référencé:
@@ -2290,13 +2273,9 @@ de <code class="SIS">getSeries()</code>
 et dont la méthode <code class="SIS">getNilReason()</code> retournera la constante <code class="SIS">UNKNOWN</code>.
 </p>
 
-<table class="hidden">
-<tr>
-<th>Information présente</th>
-<th>Information absente</th>
-</tr>
-<tr>
-<td>
+<div class="row-of-boxes">
+<div>
+<div class="caption">Information présente</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;CI_Citation&gt;
   &lt;series&gt;
     &lt;CI_Series&gt;
@@ -2304,16 +2283,14 @@ et dont la méthode <code class="SIS">ge
     &lt;/CI_Series&gt;
   &lt;/series&gt;
 &lt;/CI_Citation&gt;</samp></pre>
-
-</td><td>
-
+</div>
+<div>
+<div class="caption">Information absente</div>
 <pre style="margin-top: 6pt"><samp class="xml">&lt;CI_Citation&gt;
   &lt;series nilReason=<i>"unknown"</i>/&gt;
 &lt;/CI_Citation&gt;</samp></pre>
-
-</td>
-</tr>
-</table>
+</div>
+</div>
 </section>
 </section>
 </section>
@@ -2631,23 +2608,18 @@ Ainsi, au lieu de la boucle de gauche ci
 généralement utiliser la boucle de droite:
 </p>
 
-<table class="hidden">
-<tr>
-<th>Boucle à éviter</th>
-<th>Boucle recommandée</th>
-<th>Exemples de caractères supplémentaires</th>
-</tr>
-<tr>
-<td>
+<div class="row-of-boxes">
+<div>
+<div class="caption">Boucle à éviter</div>
 <pre style="margin-top: 6pt"><code><b>for</b> (<b>int</b> i=0; i&lt;string.length(); i++) {
     <b>char</b> c = string.charAt(i);
     <b>if</b> (Character.isWhitespace(c)) {
         <code class="comment">// Un espace blanc a été trouvé.
 </code>    }
 }</code></pre>
-
-</td><td>
-
+</div>
+<div>
+<div class="caption">Boucle recommandée</div>
 <pre style="margin-top: 6pt"><code><b>for</b> (<b>int</b> i=0; i&lt;string.length();) {
     <b>int</b> c = string.codePointAt(i);
     <b>if</b> (Character.isWhitespace(c)) {
@@ -2655,14 +2627,14 @@ généralement utiliser la boucle de dro
 </code>    }
     i += Character.charCount(c);
 }</code></pre>
-
-</td><td>
+</div>
+<div>
+<div class="caption">Exemples de caractères supplémentaires</div>
 <center>(l’affichage dépend des capacités du navigateur)</center>
 <p style="font-size: 40px">&#128649; &#128677; &#128679; &#128683;
 &#128687; &#128696; &#128698; &#128697; &#128708; &#128685;</p>
-</td>
-</tr>
-</table>
+</div>
+</div>
 
 <p>
 <abbr title="Spatial Information System">SIS</abbr> supporte les caractères supplémentaires en utilisant la boucle de droite lorsque nécessaire.
@@ -3700,13 +3672,18 @@ se lisent de droite à gauche:
 <var>A</var>×<var>B</var>×<var>C</var> est équivalent à d’abord appliquer l’opération <var>C</var>,
 suivit de l’opération <var>B</var> et finalement l’opération <var>A</var>.
 </p>
-<table class="hidden"><tr>
-<th>Changement 2</th><th/>
-<th>Changement 1</th><th/>
-<th>Conversion initiale</th><th/>
-<th>Opérations combinées</th>
-</tr><tr>
-<td style="vertical-align: middle">
+<div style="display:table; margin:auto">
+<div style="display:table-row">
+<div class="caption" style="display:table-cell">Changement 2</div>
+<div class="caption" style="display:table-cell"> </div>
+<div class="caption" style="display:table-cell">Changement 1</div>
+<div class="caption" style="display:table-cell"> </div>
+<div class="caption" style="display:table-cell">Conversion initiale</div>
+<div class="caption" style="display:table-cell"> </div>
+<div class="caption" style="display:table-cell">Opérations combinées</div>
+</div>
+<div style="display:table-row">
+<div style="display:table-cell; vertical-align:middle">
 <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="MathML capable browser required" display="block">
 <mfenced close="]" open="[">
 <mtable>
@@ -3728,9 +3705,9 @@ suivit de l’opération <var>B</var> et
 </mtable>
 </mfenced>
 </math>
-</td>
-<td style="vertical-align: middle; padding-left: 15px; padding-right: 15px">×</td>
-<td style="vertical-align: middle">
+</div>
+<div style="display:table-cell; vertical-align:middle; padding-left: 15px; padding-right: 15px">×</div>
+<div style="display:table-cell; vertical-align:middle">
 <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
 <mfenced close="]" open="[">
 <mtable>
@@ -3752,9 +3729,9 @@ suivit de l’opération <var>B</var> et
 </mtable>
 </mfenced>
 </math>
-</td>
-<td style="vertical-align: middle; padding-left: 15px; padding-right: 15px">×</td>
-<td style="vertical-align: middle">
+</div>
+<div style="display:table-cell; vertical-align:middle; padding-left: 15px; padding-right: 15px">×</div>
+<div style="display:table-cell; vertical-align:middle">
 <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
 <mfenced close="]" open="[">
 <mtable>
@@ -3790,9 +3767,9 @@ suivit de l’opération <var>B</var> et
 </mtable>
 </mfenced>
 </math>
-</td>
-<td style="vertical-align: middle; padding-left: 15px; padding-right: 15px">=</td>
-<td style="vertical-align: middle">
+</div>
+<div style="display:table-cell; vertical-align:middle; padding-left: 15px; padding-right: 15px">=</div>
+<div style="display:table-cell; vertical-align:middle">
 <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
 <mfenced close="]" open="[">
 <mtable>
@@ -3828,8 +3805,9 @@ suivit de l’opération <var>B</var> et
 </mtable>
 </mfenced>
 </math>
-</td>
-</tr></table>
+</div>
+</div>
+</div>
 <p>
 Un principe clé est qu’il n’y a pas besoin d’écrire un code dédié à ce type d’opérations sur les axes.
 Ces opérations, et bien d’autres, sont prises en compte naturellement par l’algèbre matricielle.



Mime
View raw message