Image Control XHTML and CSS

I was asked for a code snippet the Using ePub blog, on controlling image size and positioning with CSS. This is more correctly an XML question, than ePub, so I have given the answer here.

We have a defined and controlled grammar XHTML we call IGP:FoundationXHTML, or FX for short. This delivers content strategies that are consistent, simple, reusable and processable. FX is the heart that allows the same XHTML to produce sophisticated print PDF, eBook formats, packages and other files easily and instantly.

The real need for publishers of content of all types is not ePubs - ePub is as terminal a format as paper,  especially once DRM is applied. Publishers need a current and future-value digital content strategy. FX delivers that.

On to the snippet!

The XHTML

<div class="media-rw figure-rw float-top-rw floatgalley-none-rw 
         align-right-rw width-30-rw" >
     <div class="pc-rw">
         <img src="whale.jpg" alt="" />
         <p class="caption-rw">Figure 
         <span class="num-figure-rw variable-rw">xx</span> Your Caption</p>
     </div>
</div>

This is a basic image layout and control block from FX. It defines the fact that the block is media, and the media type is a figure.

In FX talk, that means it is an picture with a number. If it is figure-rw, it needs a number in the caption, if it was image-rw it would be just a picture, if it was plate-rw, it would print a two page spread to the page margins, but the ePub output would be a single image, etc.).

FX makes extensive use of multiple class properties. Each selector provided a set of descriptive intentions for an XML block. In this example:

• media-rw is the content block structure classification
  
• image-rw is an extension to block structural classification. A sub-class if you wish.
  
• width-* and align-* and floatgalley-* indicate presentation intentions to processors.

We put -rw on all our class statements as the pages are often mashed up into other site pages. This uniqueness attribute prevents common grammars from various stylesheets clashing. The -rw extensions are processed out for ebook formats.

Adding a little more complexity to the equation is the inner-<div class="pc-rw"> (pc=position-control) for extra control.

The CSS

The CSS for this is:

div.media-rw div.pc-rw img { 
 width: 100%; 
 }
/* width-30 */
.width-30-rw { 
	width: 40%; 
	}
/* align-right */
div.align-right-rw { 
	display: block; 
	margin-right: auto;
	}
.align-right-rw .pc-rw { 
	text-align: left; 
	margin: 0 0 0 auto; 
	}
.align-right-rw .pc-rw img { 
	margin: 0 0 0 0; 
	}
/* floatgalley-right */
div.floatgalley-right-rw {
	float: right; 
	text-align: left; 
	margin: 0 0 0 1em !important; 
	padding: 0;
	}
div.floatgalley-right-rw .pc img {
	width: 100%; 
	margin: 0; 
	}
.caption-rw {
	padding: 0;
	margin: 0;
	}

All that should work if you cut and paste it into a valid HTML page. If you change floatgalley-none-rw to floatgalley-right-rw, you will see the image float right at 30% of the galley width, wrapped by text. 

NOTE: ADE does not implement margin: 0 auto 0 auto;. There is no centering action and the block will be aligned left. Sad but true.

Extending the control set

Creating layout controls on large works with a lot of blocks and images that need to be sized, aligned and floated can become annoying and time consuming. Because these properties are mechanical we maintain standard stylesheets with a full set of layout options. In IGP:FLIP Formats on Demand the unused CSS is auto reduced when generating formats.

A basic layout set of CSS options

Using the width selector set, the image width can be easily changed with a very simple set of statements. These can be modified anyway you like. The value of this set up you can focus on the image or block being adjusted and just change a simple self-explaining class value in the XHTML.

.width-10-rw { width: 10%; }
.width-20-rw { width: 20%; }
.width-30-rw { width: 30%; }
.width-40-rw { width: 40%; }
.width-50-rw { width: 50%; }
.width-60-rw { width: 60%; }
.width-70-rw { width: 70%; }
.width-80-rw { width: 80%; }
.width-90-rw { width: 90%; }
.width-auto-rw .pc-rw { width: auto; }

The CSS layout library can be extended with:

.align-left {}
.align-right {} 
.align-center {}
.floatgalley-left {}

and any other standard layout controls you care to define.

These are just some of the ways IGP:FLIP (Front List Interactive Publishing) is able to exploit the direct manipulation of XHTML and CSS to create digital content that has value and a future. Maintain standards compliance, and use controlled class properties.

You can download a zip of the XHTML, CSS and image here. Download FX-ImageLayout

Comments

[Liz Castro]

It's notable that you've controlled the image's width in this example by changing the div's width, and not the img's width, which you always have at 100%. I have found that to work as well.

What should work and doesn't (in iBooks), is applying a percentage width directly to the img element itself.