Add image and more description for bbox

This solves #34.

1.2/index.bs

@@ -101,8 +101,13 @@ The following properties can apply to most elements (where it makes sense):
 
 `bbox x0 y0 x1 y1`
 
-The bounding box of the element relative to the document image
+The `bbox` - short for "bounding box" - of an element is a rectangular box 
+around this element, which is defined by the upper-left corner (x0, y0) and
+the lower-right corner (x1, y1).
 
+  * the values are with reference to the the top-left corner of the document image
+    and measured in pixels
+  * the order of the values are `x0 y0 x1 y1` = "left top right bottom"
   * use `x_bboxes` below for character bounding boxes
   * do not use `bbox` unless the bounding box of the layout component is, in
     fact, rectangular
@@ -111,6 +116,25 @@ The bounding box of the element relative to the document image
 
 See also the section [[#bbox-typesetting]].
 
+<div class="example">
+
+```html
+<span class='ocr_line' id='line_1'
+    title="bbox 10 20 160 30">...</span>
+```
+
+The bounding box `bbox` of this line is shown in blue and it is span
+by the upper-left corner (10, 20) and the lower-right corner (160, 30).
+All coordinates are measured with reference to the top-left corner of
+the document image which border is drawn in black.
+
+<figure><img
+  alt="bbox explained"
+  src="../images/bbox-crop.png"/>
+</figure>
+
+</div>
+
 ### `textangle`
 
 `textangle alpha`

1.2/index.html

@@ -1682,8 +1682,15 @@ <h3 class="heading settled" data-level="3.1" id="general-properties"><span class
    <p>The following properties can apply to most elements (where it makes sense):</p>
    <h4 class="heading settled" data-level="3.1.1" id="bbox"><span class="secno">3.1.1. </span><span class="content"><code>bbox</code></span><a class="self-link" href="#bbox"></a></h4>
    <p><code>bbox x0 y0 x1 y1</code></p>
-   <p>The bounding box of the element relative to the document image</p>
+   <p>The <code>bbox</code> - short for "bounding box" - of an element is a rectangular box
+around this element, which is defined by the upper-left corner (x0, y0) and
+the lower-right corner (x1, y1).</p>
    <ul>
+    <li data-md="">
+     <p>the values are with reference to the the top-left corner of the document image
+and measured in pixels</p>
+    <li data-md="">
+     <p>the order of the values are <code>x0 y0 x1 y1</code> = "left top right bottom"</p>
     <li data-md="">
      <p>use <code>x_bboxes</code> below for character bounding boxes</p>
     <li data-md="">
@@ -1694,6 +1701,17 @@ <h4 class="heading settled" data-level="3.1.1" id="bbox"><span class="secno">3.1
 if the non-rectangularity is caused by floating elements around which text flows</p>
    </ul>
    <p>See also the section <a href="#bbox-typesetting">§5.2.1 bbox (typesetting)</a>.</p>
+   <div class="example" id="example-d34e6dbe">
+    <a class="self-link" href="#example-d34e6dbe"></a> 
+<pre class="language-html highlight"><span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">'ocr_line'</span> <span class="na">id</span><span class="o">=</span><span class="s">'line_1'</span>
+    <span class="na">title</span><span class="o">=</span><span class="s">"bbox 10 20 160 30"</span><span class="p">></span>...<span class="p">&lt;</span><span class="p">/</span><span class="nt">span</span><span class="p">></span>
+</pre>
+    <p>The bounding box <code>bbox</code> of this line is shown in blue and it is span
+by the upper-left corner (10, 20) and the lower-right corner (160, 30).
+All coordinates are measured with reference to the top-left corner of
+the document image which border is drawn in black.</p>
+    <figure><img alt="bbox explained" src="../images/bbox-crop.png"> </figure>
+   </div>
    <h4 class="heading settled" data-level="3.1.2" id="textangle"><span class="secno">3.1.2. </span><span class="content"><code>textangle</code></span><a class="self-link" href="#textangle"></a></h4>
    <p><code>textangle alpha</code></p>
    <p>The angle in degrees by which textual content has been rotate relative to the

1.2/spec.md

@@ -72,8 +72,13 @@ The following properties can apply to most elements (where it makes sense):
 
 `bbox x0 y0 x1 y1`
 
-The bounding box of the element relative to the document image
+The `bbox` - short for "bounding box" - of an element is a rectangular box 
+around this element, which is defined by the upper-left corner (x0, y0) and
+the lower-right corner (x1, y1).
 
+  * the values are with reference to the the top-left corner of the document image
+    and measured in pixels
+  * the order of the values are `x0 y0 x1 y1` = "left top right bottom"
   * use `x_bboxes` below for character bounding boxes
   * do not use `bbox` unless the bounding box of the layout component is, in
     fact, rectangular
@@ -82,6 +87,25 @@ The bounding box of the element relative to the document image
 
 See also the section [[#bbox-typesetting]].
 
+<div class="example">
+
+```html
+<span class='ocr_line' id='line_1'
+    title="bbox 10 20 160 30">...</span>
+```
+
+The bounding box `bbox` of this line is shown in blue and it is span
+by the upper-left corner (10, 20) and the lower-right corner (160, 30).
+All coordinates are measured with reference to the top-left corner of
+the document image which border is drawn in black.
+
+<figure><img
+  alt="bbox explained"
+  src="../images/bbox-crop.png"/>
+</figure>
+
+</div>
+
 ### `textangle`
 
 `textangle alpha`