Well, it looks like setting "width" for the imagedata element creates
the <table> markup, which then apparently causes browsers (Firefox,
Chrome) to ignore the text-align attribute. When I removed "width" from
imagedata (which contained a GIF image) but I still had the 'align'
attribute, the resulting HTML5 markup didn't have <table> and the image
was centred on the page. I rechecked all other images in my book and
none has 'width' specified - they are all centred (in figure, example
and sidebar elements).
Oddly, when I consequently set a width attribute in the CSS stylesheet
for the .mediaobject class, the image is not centred - it is
left-justified.
It seems that you must create an image at its correct (intrinsic?) width
for output, because setting a width in XML or CSS affects text-align.
On 08-04-12 9:05 AM, Bob Stayton wrote:
Hi Dave,
The HTML5 stylesheets make use of almost all the stylesheet params
that are defined for the stock html outputs, in order to support all
of the stock features and options. In this case, there is a param
named 'make.graphic.viewport', which is set to 1 by default. To make
a viewport, the stylesheet uses a table. Set that param to zero to
turn off the table.
The strange thing is that when the table is included, the style tag on
the surrounding div element should still center it:
<div style="text-align: center; " class="mediaobject">
<table style="border: 0; border-spacing: 0; padding: 0; width: 300; ">
<tr>
<td style="text-align: center; ">
<img style="text-align: middle; width: 200; " src="images/note.png"/>
</td>
</tr>
</table>
If I hardcode the center property with an align attribute <div
align="center"> instead of a CSS style, then the table is centered.
That doesn't seem right to me.
Bob Stayton
Sagehill Enterprises
[email protected] <mailto:[email protected]>
----- Original Message -----
*From:* Xmplar <mailto:[email protected]>
*To:* [email protected]
<mailto:[email protected]>
*Sent:* Saturday, April 07, 2012 12:14 AM
*Subject:* [docbook-apps] Setting alignment of mediaobject in html5
I have a logo that I want to centre on a web page, which is
located in a book titlepage. When using the HTML5 stylesheets, the
logo is not centred -- it is positioned at the left and I can't
find the coding responsible for centring it. I've noticed that now
the HTML5 stylesheets generate a table around the mediaobject,
which has the same width as the mediaobject. The previous XHTML1-1
stylesheets didn't generate a table around the mediaobject, which
made it easy to position the logo using CSS.
Here is the XHTML1-1 output:
<div class="mediaobject" style="text-align: center"><img
src="images/redlettucelogo.gif" style="text-align: middle"
width="300" alt="alt text for publisher's logo"/></div>
And the HTML5 output:
<div style="text-align: center; " class="mediaobject"><table
style="border: 0; border-spacing: 0; padding: 0; width: 300;
"><tr><td style="text-align: center; "><img style="text-align:
middle; width: 300; " src="images/redlettucelogo.gif" alt="alt
text for publisher's logo"/></td></tr></table></div>
The <table> does not have a style attribute for
"text-align=center" and is getting its width from the enclosed
mediaobject. Why is a table now generated (is this mandatory for
HTML5?), and in what template is that generated?
--
*Dave Gardiner*
