Enable images over double-page-spread

[arthurattwell]

From @arthurattwell on January 6, 2017 12:12

From @arthurattwell on October 7, 2016 11:38

From @arthurattwell on August 27, 2015 12:35

Images over a DPS are difficult to do in this framework, but it is possible. It's a bit of a hack, but once we've used it a few times and we feel the method is reliable, we may built it into the framework natively.

Of course, images across a DPS are not an ebook or web issue (if an ereader or browser shows 'pages' as a DPS, we have no control over it anyway). They are only a print issue. The problem is that PrinceXML does not provide a mechanism for placing images (or any element) across a spread.

In short, what we do is place the image twice, each in a blockquote element. Using PrinceXML's next modifier for floats, we float the blockquote elements on the first and second pages of the DPS respectively. Inside each blockquote, we position the image so that, on the left, only the left half of the image shows; and on the right, only the right half of the image shows.

This all depends on placing your image reference in a way that the first blockquote–image falls on a left-hand page.

Here's how to do it:

1. The image itself must be in the right aspect ratio. This method cannot (yet) resize or crop your image for you with CSS. In this example here, the image must be 270×120 (landscape), including an allowance for 5mm bleed.

2. In the markdown text file, place the image twice, each inside a blockquote, and tag the first instance {:.dps-left} and the second {:.dps-right}.

   > ![1](images/lion.tif)
   {:.dps-left}
   
   > ![1](images/lion.tif)
   {:.dps-right}

3. Hide the second instance of the image in any screen or epub CSS:

   /* Hide second instance of images intended for DPS in print */
   .dps-right { 
    display: none;
   }

4. In print CSS, use this. Follow the comments to modify sizes to suit your page size and layout:

   /* DPS images */
   
   blockquote.dps-left {
   float: top;
   margin: -20mm 0 10mm -5mm; /* Here you're aiming to start the image in the page bleed top left */
   width: 135mm; /* Page width plus one side's bleed, e.g. 130mm wide plus 5mm bleed */
   height: 120mm; /* Exact height of the image */
   text-align: left;
   }
   blockquote.dps-right {
   float: top next;
   margin: -20mm 0 10mm -5mm; /* Here you're aiming to place the image in the page bleed top right */
   width: 135mm; /* Page width plus one side's bleed, e.g. 130mm wide plus 5mm bleed */
   height: 120mm; /* Exact height of the image */
   text-align: right;
   }
   blockquote.dps-left p img {
   width: 270mm; /* This must be exactly double the width above */
   max-height: 120mm; /* This must be the same as the height above */
   position: absolute;
   left: -5mm;
   }
   blockquote.dps-right p img {
   width: 270mm; /* Ditto */
   max-height: 120mm; /* Ditto */
   position: absolute;
   right: -5mm;
   }

That's all based on these page settings. Yours may differ, affecting your margins, heights and widths accordingly:

@page {
    size: 130mm 200mm;
    margin-top: 15mm;
    margin-bottom: 20mm;
    margin-outside: 0;
    margin-inside: 0;
    prince-bleed: 5mm;
    prince-trim: 5mm;
}

We've done very little testing with this so far.

Copied from original issue: electricbookworks/electric-book-workflow#3

Copied from original issue: electricbookworks/electric-book#20

Copied from original issue: electricbookworks/electric-book-workflow#37

[arthurattwell]

Here is another example from an A6 booklet with full-page and DPS adverts. The styling is in Sass.

Markdown for single, full-page adverts:

> ![Advertiser](images/advert-fullpage.jpg)
{:.advert .fullpage}

Markdown for DPS adverts:

> ![Advertiser](images/advert-dps.jpg)
{:.advert .dps-left}

> ![Advertiser](images/advert-dps.jpg)
{:.advert .dps-right}

Print Sass:

@page {
    size: 105mm 148mm;
    prince-bleed: 2.5mm;
    prince-trim: 2.5mm; 
}

// Adverts

@page advert {
    margin: -5mm;
    background-color: pink; // helps spot missing image files easily
}

.advert {
    page: advert;
}

.fullpage {
    margin-top: -5mm;
    margin-left: -4mm; // Inexplicably, 1mm off. Don't yet know why that's necessary.
    height: 148mm + 10mm;
    width: 105mm + 10mm;
}
.fullpage p img {
    height: 100%;
    width: 100%;
}
.dps-left {
    page-break-before: left;
    float: top;
    margin-top: -5mm;
    margin-left: -4mm;
    height: 148mm + 10mm; // Exact height of the image plus bleed on both sides
    width: 105mm + 5mm; // Page width plus one side's bleed
    text-align: left;
}
.dps-right {
    float: top next;
    margin-top: -5mm;
    margin-left: -4mm;
    height: 148mm + 10mm; // Exact height of the image plus bleed on both sides
    width: 105mm + 5mm; // Page width plus one side's bleed
    text-align: right;
}
.dps-left p img {
    width: 105mm + 105mm + 10mm;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.dps-right p img {
    width: 105mm + 105mm + 10mm;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

Epub and web Sass must include:

// Hide second instance of images intended for DPS in print
.dps-right { 
    display: none;
}

[arthurattwell]

We have a way to do this, albeit clumsy, described in this thread. I'm leaving it open though in the hope that we'll find a better way. For instance, it may be possible to create an html snippet include that takes a file name as a parameter, e.g.

{% include dps-image.html src="pic.jpg" title="My picture" %}

See the Jekyll docs.

[arthurattwell]

Documented in 1ca8668fcd9a5adaba651fd94420f6861af655b1.

[arthurattwell]

I'm working on a JS-assisted way to do this. The idea is that by adding a dps class to a figure or image, we can have JS duplicate the image and apply classes that let us position the images with CSS.

Work in progress in this branch.