User:Windymilla/max-width illos

Max-width illustrations

**WARNING** The epub "inline-block" truncation issue causes this to fail when viewed with ADE. A possible fix that may work for some layouts is to override the figsub to use "@media handheld { div.figsub {display:block} }" which will force the images to be one above the other on handhelds - **NOT TESTED YET**

The code below has three features in addition to the standard Guiguts generation.

• It restricts the maximum width of a centered illustration so it doesn't extend beyond the width of the browser window.
• It restricts floated illustrations to a maximum of 40% of the width, so that even when a left and right are floating together, there is still room for text.
• It allows the placing of two (or more) images side-by-side, if there is room. If the screen is too narrow for that, then the images are placed above each other.

The advantage of using "max-width:100%", rather than "width:100%" is that small or medium images will not be stretched to fill the width on a wide-screen computer, but large images will be shrunk to fit on a narrower screen.

Wide screen

Narrow screen

In addition, standard HTML coding for figleft, right and center should not need changing, because the restriction happens via the CSS, and it works because the max-width parameter is defined to override a set width. Note that it is important to define the width of the containing div in the usual (Guiguts) way, as IE8 is reported not to cope well without it when used with max-width images.

Note that epubmaker removes "px" measures, so captions are not restricted to the width of the illustrations in epub/Kindle formats. This is a general problem with captions, not specific to this coding. The "narrow" class can be used, but at the moment, the max-width parameter appears to be ignored on Kindles. An alternative is to use manual line breaks to stop the caption being too wide.

Code

In the CSS, replace Guiguts definitions of figcenter, figleft, figright, etc., with

/* Images */
img {
    max-width: 100%; /* no image to be wider than screen or containing div */
    height:auto;     /* keep height in proportion to width */
}

div.figcenter {
    clear: both;
    margin: 2em auto;
    text-align: center;
    max-width: 100%; /* div no wider than screen, even when screen is narrow  */
}

/* floats get no more than 40% of width, so even a left and
   a right simultaneously leave room for some text between them */
div.figleft {
    float: left;
    clear: left;
    margin: 1em 1em 1em 0em;
    text-align: center;
    max-width: 40%;
}

div.figright {
    float: right;
    clear: right;
    margin: 1em 0em 1em 1em;
    text-align: center;
    max-width: 40%;
}

@media handheld {
/* on narrow handheld device, don't wrap text round images */
  div.figleft, div.figright {
    float: none;
    clear: both;
    margin: 2em auto;
    text-align: center;
    max-width: 100%;
  }
}

/* Use to display several figures side by side if there is room */
div.figcontainer {
    clear: both;
    margin: 0em auto;
    text-align: center;
    max-width: 100%; /* div no wider than screen, even when screen is narrow  */
}
div.figsub {
    display: inline-block;
    margin: 1em 1em;
    vertical-align: top; /* same height images will align well */
    max-width: 100%;
    text-align: center;
}

/* captions */
div.caption p {
    text-align: center;
    text-indent: 0em;
    margin: 0.25em 0;
}
div.caption p.smaller {
    font-size: smaller;
}
div.caption p.right {
    text-align: right;
    margin-right: 1em; /* slight indent from right of image */
}
div.caption p.narrow {
    display: inline-block; /* must have br before it */
    max-width: 10em; /* restrict max-width if device supports it */
}

In the HTML, figcenter, figleft and figright are the same as usual

<div class="figcenter" style="width: 550px;">
  <img src="images/fig1.jpg" width="550" height="550" alt="" title="" />
  <br /><div class="caption">
    <p class="smaller right">Small extra</p>
    <p>Fig. 1</p>
  </div>
</div>
...
<div class="figleft" style="width: 250px;">
  <img src="images/fig2.jpg" width="250" height="400" alt="" title="" /><br />
  <div class="caption">
    <p>Fig. 2</p>
  </div>
</div>
...
<div class="figright" style="width: 300px;">
  <img src="images/fig3.jpg" width="300" height="500" alt="" title="" /><br />
  <div class="caption">
    <p>Fig. 3</p>
  </div>
</div>

Where you want two or more images to display side by side if there's room, and above each other if not, then use

<div class="figcontainer">
  <div class="figsub" style="width: 200px;">
    <img src="images/fig4.jpg" width="200" height="190" alt="" title="" /><br />
    <div class="caption">
      <p>Fig. 4.</p>
    </div>
  </div>
  <div class="figsub" style="width: 200px;">
    <img src="images/fig5.jpg" width="200" height="190" alt="" title="" /><br />
    <div class="caption">
      <p class="right">Fig. 5.</p>
      <p>Additional caption</p>
    </div>
  </div>
  <div class="figsub" style="width: 200px;">
    <img src="images/fig6.jpg" width="200" height="190" alt="" title="" /><br />
    <div class="caption">
      <p class="narrow">Fig. 6. Extended caption on a narrow image.</p>
    </div>
  </div>
</div>

Result on wide screen

Result on medium-width screen

Result on narrow screen