Authors submitted a manuscript with an image file that has the size of 2 pages and that should stretch across 2 pages (verso -> recto). Is it possible to do that via princeXML CSS or do I have to split the image into 2 images by hand, putting them individually on its page respectively.
For now I tried the following approach (below) but instead of stretching to 2nd page it just repeats the image fragment from the 1st page again on the 2nd page. Here is my approach so far:
HTML
CSS
Result:
For now I tried the following approach (below) but instead of stretching to 2nd page it just repeats the image fragment from the 1st page again on the 2nd page. Here is my approach so far:
HTML
<div class="teidiv1" id="partA_chap1" lang="de">
<h2 lang="de"><span class="head">Räume der Ermöglichung: Einleitung </span></h2>
<p class="authors">
Utan Schirmer
</p>
<p id="index.xml-p-d32e653">„Grundsätzlich – denke ich – geht es mir immer um ähnliche Fragen, also darum, kulturelle
Formen und Orte für verschiedene Lebensweisen zu schaffen.“ Mit diesem Satz resümiert
Josch Hoenes im Jahr 2012 in einem Interview für den Newsletter der Hannchen-Mehrzweck-Stiftung,
was sein Engagement in den unterschiedlichen Feldern und an den Schnittstellen von
Aktivismus, Wissenschaft und Kunst antreibt. In der Tat zieht sich die Frage danach,
wie unterschiedliche Räume – als Verbindung konkreter, physischer Orte mit bestimmten
kulturellen Formen und Praxen – die Lebbarkeit verschiedener geschlechtlicher und
sexueller Lebens- und Begehrensweisen ermöglichen oder verhindern, durch sein Werk
und aktivistisches Leben. </p>
...
</div>
CSS
#partA_chap1 > div:nth-child(1) { page: partA_chap1-cover; }
@page partA_chap1-cover {
background-image: url("./media/weiss_blitze_sektionl_mc.jpg");
background-size: auto 100%;
background-repeat: no-repeat;
@bottom-left { content: normal; }
}
#partA_chap1 > div:nth-child(1) > img { display: none;}
#partA_chap1 > div:nth-child(1) { page-break-after: left !important; }
#partA_chap1 > div:nth-child(1) > div.caption
{
position: absolute;
bottom: -7.5em;
left: -4em;
width: 50%;
background-color: rgba(255, 255, 255, 0.4);
padding: 0.4em;
}
Result: