- html4: allow embedded images and icons (data-uri attribute).

- html4: table and example block caption place at bottom for consistency.
- html4: dropped border around example block.
- html4: cellpaddings made equal to 4 for consistency.

3 files changed, 28 insertions, 12 deletions

diff --git a/html4.conf b/html4.conf
index 10dd056..c5cefe6 100644
--- a/html4.conf
+++ b/html4.conf
@@ -39,14 +39,18 @@ template::[pi-blockmacro]
 [image-inlinemacro]
 <a href="{link}"{role? class="{role}"}>
 # src attribute must be first attribute for blogpost compatibility.
-<img src="{imagesdir=}{imagesdir?/}{target}" style="border-width: 0;" alt="{alt={target}}"{width? width="{width}"}{height? height="{height}"}{title? title="{title}"}>
+{data-uri%}<img src="{imagesdir=}{imagesdir?/}{target}" style="border-width: 0;" alt="{alt={target}}"{width? width="{width}"}{height? height="{height}"}{title? title="{title}"}>
+{data-uri#}<img style="border-width: 0;" alt="{alt={target}}"{width? width="{width}"}{height? height="{height}"}{title? title="{title}"}
+{data-uri#}{sys:"{python}" -u -c "import mimetypes,base64,sys; print 'src=\"data:'+mimetypes.guess_type(r'{target}')[0]+';base64,'; base64.encode(sys.stdin,sys.stdout)" < "{eval:os.path.join(r"{indir={outdir}}",r"{imagesdir=}",r"{target}")}"}">
 {link#}</a>
 
 [image-blockmacro]
 <div{align? align="{align}"}{role? class="{role}"}{float? style="float:{float};"}>
 <a name="{id}"></a>
 <a href="{link}">
-<img src="{imagesdir=}{imagesdir?/}{target}" style="border-width: 0;" alt="{alt={target}}"{width? width="{width}"}{height? height="{height}"}>
+{data-uri%}<img src="{imagesdir=}{imagesdir?/}{target}" style="border-width: 0;" alt="{alt={target}}"{width? width="{width}"}{height? height="{height}"}>
+{data-uri#}<img alt="{alt={target}}"{width? width="{width}"}{height? height="{height}"}
+{data-uri#}{sys:"{python}" -u -c "import mimetypes,base64,sys; print 'src=\"data:'+mimetypes.guess_type(r'{target}')[0]+';base64,'; base64.encode(sys.stdin,sys.stdout)" < "{eval:os.path.join(r"{indir={outdir}}",r"{imagesdir=}",r"{target}")}"}">
 {link#}</a>
 <p><b>{caption={figure-caption} {counter:figure-number}. }</b>{title}</p>
 </div>
@@ -221,7 +225,7 @@ template::[admonitionblock]
 [listingblock]
 <a name="{id}"></a>
 <p><b>{title}</b></p>
-<table border="0" bgcolor="#e8e8e8" width="100%" cellpadding="10"{role? class="{role}"}><tr><td>
+<table border="0" bgcolor="#e8e8e8" width="100%" cellpadding="4"{role? class="{role}"}><tr><td>
 <pre><code>
 |
 </code></pre>
@@ -236,7 +240,7 @@ template::[admonitionblock]
 
 [sidebarblock]
 <a name="{id}"></a>
-<table frame="border" bgcolor="#ffffee" width="100%" cellpadding="15"{role? class="{role}"}>
+<table frame="border" bgcolor="#ffffee" width="100%" cellpadding="4"{role? class="{role}"}>
 <tr><td>
 <p><em>{title}</em></p>
 |
@@ -281,16 +285,22 @@ template::[quoteblock]
 
 [exampleblock]
 <a name="{id}"></a>
-<p><b>{caption={example-caption} {counter:example-number}. }</b>{title}</p>
-<table frame="border" width="100%" cellpadding="15"{role? class="{role}"}>
+<table frame="void" width="100%" cellpadding="4"{role? class="{role}"}>
 <tr><td style="border-left: 2px solid silver;">
 |
 </td></tr></table>
+<p><b>{caption={example-caption} {counter:example-number}. }</b>{title}</p>
 
 [admonitionblock]
 <a name="{id}"></a>
-<table frame="void" cellpadding="8"{role? class="{role}"}>
-<tr valign="top"><td><p><b><u>{caption}</u></b></p></td>
+<table frame="void" cellpadding="4"{role? class="{role}"}>
+<tr valign="top">
+<td>
+{data-uri%}{icons#}<img src="{icon={iconsdir}/{name}.png}" alt="{caption}">
+{data-uri#}{icons#}<img alt="{caption}" src="data:image/png;base64,
+{data-uri#}{icons#}{sys:"{python}" -u -c "import base64,sys; base64.encode(sys.stdin,sys.stdout)" < "{eval:os.path.join(r"{indir={outdir}}",r"{icon={iconsdir}/{name}.png}")}"}">
+{icons%}<p><b><u>{caption}</u></b></p>
+</td>
 <td style="border-left: 1px solid silver;">
 <p><b>{title}</b></p>
 |
@@ -347,7 +357,6 @@ style="float:{float};"
 frame="{frame%border}"
 frame="{frame@topbot:hsides}{frame@all:border}{frame@none:void}{frame@sides:vsides}"
 cellspacing="0" cellpadding="4">
-<caption><b>{caption={table-caption} {counter:table-number}. }</b>{title}</caption>
 {headrows#}<thead>
 {headrows}
 {headrows#}</thead>
@@ -358,6 +367,7 @@ cellspacing="0" cellpadding="4">
 {bodyrows}
 </tbody>
 </table>
+<p><b>{caption={table-caption} {counter:table-number}. }</b>{title}</p>
 </div>
 
 #--------------------------------------------------------------------
diff --git a/tests/testasciidoc.conf b/tests/testasciidoc.conf
index 62dc7f4..3c6c1ff 100644
--- a/tests/testasciidoc.conf
+++ b/tests/testasciidoc.conf
@@ -56,7 +56,7 @@ Example article with embedded images (data URIs)
 article-data-uri
 
 % backends
-['xhtml11','html5']
+['html4','xhtml11','html5']
 
 % options
 ['--section-numbers']
diff --git a/wordpress.conf b/wordpress.conf
index 69e7a1b..3fffa68 100644
--- a/wordpress.conf
+++ b/wordpress.conf
@@ -71,16 +71,22 @@ paragraph=<div><code>|</code></div>
 
 [exampleblock]
 <a name="{id}"></a>
-<p><b>{caption=}{title}</b></p>
 <table frame="void" width="100%" style="margin:0.2em 0;">
 <tr><td style="border-left:3px solid #e8e8e8; padding:0.5em;">
 |
 </td></tr></table>
+<p><b>{caption={example-caption} {counter:example-number}. }</b>{title}</p>
 
 [admonitionblock]
 <a name="{id}"></a>
 <table frame="void" style="margin:0.2em 0;">
-<tr valign="top"><td style="padding:0.5em;"><p><b><u>{caption}</u></b></p></td>
+<tr valign="top">
+<td style="padding:0.5em;">
+{data-uri%}{icons#}<img src="{icon={iconsdir}/{name}.png}" alt="{caption}">
+{data-uri#}{icons#}<img alt="{caption}" src="data:image/png;base64,
+{data-uri#}{icons#}{sys:"{python}" -u -c "import base64,sys; base64.encode(sys.stdin,sys.stdout)" < "{eval:os.path.join(r"{indir={outdir}}",r"{icon={iconsdir}/{name}.png}")}"}">
+{icons%}<p><b><u>{caption}</u></b></p>
+</td>
 <td style="border-left:3px solid #e8e8e8; padding:0.5em;">
 <p><b>{title}</b></p>
 |