OASIS Mailing List ArchivesView the OASIS mailing list archive below
or browse/search using MarkMail.

 


Help: OASIS Mailing Lists Help | MarkMail Help

docbook-apps message

[Date Prev] | [Thread Prev] | [Thread Next] | [Date Next] -- [Date Index] | [Thread Index] | [List Home]


Subject: Re: [docbook-apps] Setting alignment of mediaobject in html5


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=""/>
      </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
bobs@sagehill.net
 
 
----- Original Message -----
From: Xmplar
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="" 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="" 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





[Date Prev] | [Thread Prev] | [Thread Next] | [Date Next] -- [Date Index] | [Thread Index] | [List Home]