Differences

This shows you the differences between two versions of the page.

--- dokuwiki_add_caption [2021/06/05 22:55]
admin [A table without caption]
+++ dokuwiki_add_caption [2021/06/09 22:41]
admin [Mechanism]
@@ Line 2: / Line 2: @@
+  * This is a small piece of Javascript code to add a caption to a table.
   * Works with DokuWiki's default template.
-  *
+  * Works with WRAP plugin.
+  * Just add a line of ''%%<WRAP caption>Caption text</WRAP>%%'' before the table.
+===== Code =====
+Add the following code to your ''conf/userscript.js''.
+<code javascript add_caption.js>
+jQuery('.page div.table>table').each(function (index) {
+  let $table = jQuery(this);
+  let $prevDiv = $table.parent().prev();
+  if ($prevDiv.hasClass('wrap_caption') || $prevDiv.hasClass('caption')) {
+    if ($prevDiv.children('p').length > 0) {
+      let captionText = $prevDiv.children('p').html();
+      $table.prepend('<caption>' + captionText + '</caption>');
+      $prevDiv.remove();
+      if (location.hash) {
+        location.href = location.hash;
+      }
+    }
+  }
+});
+</code>
+Probably you like to add the following lines or similar to your ''conf/userall.css''.
+<code css styles.css>
+caption {
+  text-align: center;
+  font-weight: bold;
+}
+</code>
 ===== Test drive =====
-==== A table without caption ====
+==== A table without caption (default) ====
+The default syntax of a table is like this:
 <code>
-^ No. ^ Description ^ Quantity ^
+^ No. ^ Description ^ Quantity ^ Remark ^
-| 1   | Lorem ipsum dolor sit amet | 100 |
+| 1   | Lorem ipsum dolor sit amet | 100 |Euismod posuere mus lobortis |
-| 2   | Konsectetur adipiscing elit molestie  | 50 |
+| 2   | Konsectetur adipiscing elit molestie  | 50 |Aenean sed ornare|
-| 3   | Scelerisque vestibulum metus risus |25 |
+| 3   | Scelerisque vestibulum metus risus |25 |Sociis mollis, morbi proin suspendisse magnis|
-| 4   | Nunc a commodo nullam | 200 |
+| 4   | Nunc a commodo nullam | 200 |  |
 </code>
 The above code is rendered as follows:
-^ No. ^ Description ^ Quantity ^
+^ No. ^ Description ^ Quantity ^ Remark ^
-| 1   | Lorem ipsum dolor sit amet | 100 |
+| 1   | Lorem ipsum dolor sit amet | 100 |Euismod posuere mus lobortis |
-| 2   | Konsectetur adipiscing elit molestie  | 50 |
+| 2   | Konsectetur adipiscing elit molestie  | 50 |Aenean sed ornare|
-| 3   | Scelerisque vestibulum metus risus |25 |
+| 3   | Scelerisque vestibulum metus risus |25 |Sociis mollis, morbi proin suspendisse magnis|
-| 4   | Nunc a commodo nullam | 200 |
+| 4   | Nunc a commodo nullam | 200 |  |
-==== A table without caption ====
+==== A table with a caption ====
-<WRAP caption>Table 2. Caption for the Table in WRAP tag (block element)</WRAP>
+Add one line above the table like this:
+<code>
+<WRAP caption>Table 2. Caption text is displayed like this</WRAP>
 ^ No. ^ Description ^ Quantity ^ Remark ^
@@ Line 36: / Line 71: @@
 | 3   | Scelerisque vestibulum metus risus |25 |Sociis mollis, morbi proin suspendisse magnis|
 | 4   | Nunc a commodo nullam | 200 |  |
+</code>
+this is rendered as:
+<WRAP caption>Table 2. Caption text is displayed like this</WRAP>
+^ No. ^ Description ^ Quantity ^ Remark ^
+| 1   | Lorem ipsum dolor sit amet | 100 |Euismod posuere mus lobortis |
+| 2   | Konsectetur adipiscing elit molestie  | 50 |Aenean sed ornare|
+| 3   | Scelerisque vestibulum metus risus |25 |Sociis mollis, morbi proin suspendisse magnis|
+| 4   | Nunc a commodo nullam | 200 |  |
+Since the caption is inserted within the table, it aligns with the table, as shown below with a small table.
+<WRAP caption>Table 3. Caption text is displayed like this</WRAP>
+^ No. ^ Description ^ Quantity ^
+| 1   | Lorem ipsum dolor sit amet | 100 |
+| 2   | Konsectetur adipiscing elit molestie  | 50 |
+| 3   | Scelerisque vestibulum metus risus |25 |
+| 4   | Nunc a commodo nullam | 200 |
+===== Mechanism =====
+The original HTML text is:
+<code html>
+<div class="wrap_caption">
+  <p> Caption text</p>
+</div>
+<div class="table">
+  <table>
+     ...
+  </table>
+</div>
+</code>
+This is transformed to:
+<code html>
+<div class="table">
+  <table>
+    <caption>Caption text</caption>
+    ...
+  </table>
+</div>
+</code>
+Since this transformation is made **after** the rendering by DokuWiki, the normal formatting syntax (such as ''%%//italic//%%'', ''%%__underline__%%'', etc.) can be used in the caption text.

The Latest Edition

User Tools

Site Tools

Differences

Page Tools