How to force chapters to start on ODD pages (html and epub)
To achieve what you want, you need to use a pollyfill, like paged.js.
I've created a minimal example using the pollyfill which achieves what you want. Put following code in a separate html file, then open it in Chrome and click on print button.
<!DOCTYPE html>
<html lang="en">
<head>
<link media="print" rel="stylesheet"
href="https://www.pagedjs.org/css/pagedjs/interface.min.9b2f873f23cdd2a5e7c0f7a444b030c5.css">
<script src="https://www.pagedjs.org/js/paged.polyfill.e35b32228f7c0ce277c05a9b4d3db5c5.js" type="module"></script>
<script>
window.PagedConfig = { auto: false };
window.addEventListener("load", function () {
if (document.querySelector('#print')) {
document.querySelector('#print').addEventListener("click", preview);
}
});
async function preview() {
await window.PagedPolyfill.preview();
window.print();
}
</script>
<style>
#print {
position: fixed;
z-index: 20000;
padding: .7em;
right: 10px;
top: 10px;
font-size: 1.5em;
background-color: greenyellow;
border: 1px dashed red;
}
.chapter {
border: 1px dotted green;
}
@media print {
h1 {
string-set: title content(text);
}
#print {
display: none;
}
@page {
size: A4;
@bottom-center {
content: "Page "counter(page) " of "counter(pages);
font-size: 4mm;
color: gray;
}
@top-left {
content: string(title);
color: gray;
font-size: 4mm;
}
}
@page :blank {
@top-left {
content: none;
}
}
.chapter {
border: none;
break-before: right;
}
}
</style>
</head>
<body>
<section class="chapter">
<h1>Chapter 1 abc</h1>1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eligendi velit dicta
sapiente
culpa dolor est officiis optio? Recusandae soluta iure minus quisquam magnam ullam vel eius facilis. Corrupti, sunt
dolores rerum corporis aliquid, ducimus Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis eum
nemo veniam est expedita modi nam quia, amet, quidem quam minima repellendus! Nihil voluptate cupiditate odit
impedit, a, nemo omnis aspernatur similique quasi labore unde accusamus! Numquam corporis, facere sunt porro
aspernatur perspiciatis facilis provident inventore eveniet quisquam voluptate obcaecati, nostrum ex modi, sint
doloremque unde aperiam? Vero eius illum ex ratione pariatur similique fugiat reprehenderit cupiditate neque error?
Dolorem ea quod, eveniet nemo repellat placeat omnis vitae quaerat, vero ipsa quas officia aperiam ipsum,
necessitatibus ullam pariatur! Commodi beatae corporis voluptas aliquam, doloribus molestias saepe neque placeat,
quae quam repudiandae, asperiores fugiat possimus a omnis. Obcaecati alias, iure dolore maxime voluptas minus
nesciunt repellat, officiis ab commodi quos ullam earum dolorum. Iusto culpa delectus consectetur pariatur aliquid
minus at fuga porro, quaerat, totam officiis ipsam ad nesciunt. Rem hic quisquam iure. Repudiandae quisquam quo
porro alias obcaecati ut aperiam veritatis laborum, quasi perferendis, tempora dolore? Dolorem aperiam accusantium
doloribus consequatur, autem earum. Dolor accusantium, labore quasi amet nisi totam quibusdam fugit a adipisci
distinctiosi veritatis optio natus quo, nulla repellat ad inventore assumenda omnis, nemo doloremque
minus sapiente modi possimus dolor rerum quidem nisi ea. Dolor harum neque aperiam, quidem saepe repellat voluptatum
ipsum placeat? Quibusdam, dolorem similique in alias nesciunt sunt recusandae libero fugiat quas quod architecto
consequatur ex qui exercitationem unde quidem nisi rerum totam asperiores ipsum. Ratione accusantium voluptates
debitis possimus minima animi? Cum, esse magnam illum placeat minus facilis voluptas sit dolore blanditiis quidem
dolores fugit facere aperiam saepe provident, fugiat consequatur voluptatem, tenetur reprehenderit nulla sunt earum.
Possimus eum, quos soluta aperiam explicabo laudantium beatae minima sed nisi quod dignissimos ullam obcaecati odio
cupiditate ad facere exercitationem nulla, facilis sapiente? Excepturi quo voluptate quisquam cumque, sed natus.
Blanditiis sapiente eligendi error sint et labore ducimus totam porro nobis voluptas voluptatem excepturi ratione
tempora facilis esse laudantium fuga modi consequatur, quisquam harum voluptates. Nostrum id sapiente veniam fugiat
similique beatae voluptate dolorem officia corrupti deleniti commodi doloribus, aliquam expedita libero ipsam
repellat. Nesciunt consequatur quos nihil qui. Dolores quas eius odit maxime maiores labore veniam qui vitae,
consequuntur ratione magnam soluta, totam saepe illo eveniet voluptatem beatae ullam a assumenda, aliquam temporibus
nemo excepturi quibusdam. Fuga natus, quis totam doloribus libero aliquid illum nobis aut. Voluptatum maxime laborum
sint numquam nostrum dolor magnam, dicta iste corporis amet eveniet laudantium alias blanditiis fugit, quidem vitae
quia deserunt beatae magni nemo temporibus ipsam. Repudiandae atque cupiditate nostrum neque nobis ipsam architecto
commodi voluptatum quaerat fuga, aut inventore corporis modi minima saepe ipsa eligendi? Dolor ab sapiente pariatur
doloremque nemo delectus at accusamus libero, cum dolore eligendi. Fugiat quis atque aperiam quisquam, culpa quae
labore tempora repellendus voluptate sunt, est aliquid eligendi ullam laborum doloremque rem ut quod excepturi
consequuntur eius dolore enim incidunt ipsa pariatur! Dolorem, porro provident consequatur accusantium quis quia
obcaecati sequi, distinctio iusto magnam aliquid dicta nemo culpa eveniet. Quasi fuga eaque, deleniti dicta eligendi
ea at, quaerat recusandae fugiat animi reiciendis, inventore ipsum atque vero? Numquam illum facere quibusdam
assumenda! Excepturi modi quasi culpa debitis quia aliquam quibusdam! Sunt enim possimus nam ratione mollitia quas
amet fuga minima nihil ipsa laudantium velit odit maiores facilis vel, accusamus nulla consequatur fugit harum
pariatur quidem. Dignissimos dolorum eum vel doloremque earum molestiae voluptatem maiores labore nesciunt pariatur.
Suscipit aspernatur numquam exer perspiciatis facilis provident inventore eveniet quisquam voluptate obcaecati,
nostrum ex modi, sint
doloremque unde aperiam? Vero eius illum ex ratione pariatur similique fugiat reprehenderit cupiditate neque error?
Dolorem ea quod, eveniet nemo repellat placeat omnis vitae quaerat, vero ipsa quas officia aperiam ipsum,
necessitatibus ullam pariatur! Commodi beatae corporis voluptas aliquam, doloribus molestias saepe neque placeat,
quae quam repudiandae, asperiores fugiat possimus a omnis. Obcaecati alias, iure dolore maxime voluptas minus
nesciunt repellat, officiis ab commodi quos ullam earum dolorum. Iusto culpa delectus consectetur pariatur aliquid
minus at fuga porro, quaerat, totam officiis ipsam ad nesciunt. Rem hic quisquam iure. Repudiandae quisquam quo
porro alias obcaecati ut aperiam veritatis laborum, quasi perferendis, tempora dolore? Dolorem aperiam accusantium
doloribus consequatur, autem earum. Dolor accusantium, labore quasi amet nisi totam quibusdam fugit a adipisci
distinctio iusto excepturi exercitationem? In perferendis officiis vel est cumque magni corporis repellat iusto
consequuntur vitae maiores odit adipisci quibusdam optio, eius quas similique aliquam laudantium totam et! Ad
accusamus provident repudiandae dolorem earum culpa distinctio minus, molestias, mollitia doloribus voluptates odio?
Vitae ipsam recusandae perspiciatis adipisci, quos repudiandae id minus sequi animi delectus culpa distinctio eaque
doloribus necessitatibus alias sint perferendis mollitia fugiat architecto. Dolore placeat ipsa similique suscipit,
laborum exercitationem, modi pariatur sed ipsum saepe sunt, blanditiis accusantium adipisci doloremque iusto. Amet
labore fugiat, porro incidunt atque nemo corporis repudiandae quae debitis aperiam. Pariatur tempora, est veritatis
ipsa cupiditate aliquid sequi eum fugit quidem natus ex corrupti ratione! Reprehenderit, perferendis fugit. Unde
rerum numquam pariatur quos odio. Autem molestiae modi, quo fugiat unde eum officiis ea adipisci necessitatibus sit
expedita odit dolorum consectetur debitis aut, facere quidem optio rerum doloribus. Alias autem fuga dolore
consequatur nam repudiandae eligendi veritatis, neque inventore totam iusto minima ut vero non magnam, reprehenderit
assumenda corrupti. Quidem, laborum repudiandae facere adipisci consectetur doloremque iusto veritatis magni labore,
totam vitae repellat maiores maxime dolorum exercitationem nobis. Deleniti deserunt voluptatibus, voluptates ex
reiciendis dolorum quas corrupti magni omnis vitae, similique nostrum exercitationem blanditiis neque id voluptas
qui facilis? Obcaecati architecto modi quis unde quod corporis possimus labore. Quo non porro perferendis voluptates
obcaecati in neque consectetur totam exercitationem iste unde voluptate eligendi quod, commodi eveniet dicta maxime
reprehenderit suscipit alias quidem dolore deserunt dolores culpa? Modi ab, culpa consectetur voluptates quaerat
maiores minima impedit placeat at vel exercitationem sapiente eos debitis omnis iure architecto reiciendis veritatis
commodi, dolor laudantium excepturi repellat vitae voluptatum! Illo provident amet, rerum molestiae impedit quas ut,
minima doloremque nemo molestias ab a! Totam est perferendis omnis in vel reiciendis quaerat, repudiandae cupiditate
dicta asperiores necessitatibus et pariatur, commodi fugiat excepturi quo vitae at quam rem eveniet animi! Itaque
totam aspernatur ab quasi veritatis optio natus quo, nulla repellat ad inventore assumenda omnis, nemo doloremque
minus sapiente modi possimus dolor rerum quidem nisi ea. Dolor harum neque aperiam, quidem saepe repellat voluptatum
ipsum placeat? Quibusdam, dolorem similique in alias nesciunt sunt recusandae libero fugiat quas quod architecto
consequatur ex qui exercitationem unde quidem nisi rerum totam asperiores ipsum. Ratione accusantium voluptates
debitis possimus minima animi? Cum, esse magnam illum placeat minus facilis voluptas sit dolore blanditiis quidem
dolores fugit facere aperiam saepe provident, fugiat consequatur voluptatem, tenetur reprehenderit nulla sunt earum.
Possimus eum, quos soluta aperiam explicabo laudantium beatae minima sed nisi quod dignissimos ullam obcaecati odio
cupiditate ad facere exercitationem nulla, facilis sapiente? Excepturi quo voluptate quisquam cumque, sed natus.
Blanditiis sapiente eligendi error sint et labore ducimus totam porro nobis voluptas voluptatem excepturi ratione
tempora facilis esse laudantium fuga modi consequatur, quisquam harum voluptates. Nostrum id sapiente veniam fugiat
similique beatae voluptate dolorem officia corrupti deleniti commodi doloribus, aliquam expedita libero ipsam
repellat. Nesciunt consequatur quos nihil qui. Dolores quas eius odit maxime maiores labore veniam qui vitae,
consequuntur ratione magnam soluta, totam saepe illo eveniet voluptatem beatae ullam a assumenda, aliquam temporibus
nemo excepturi quibusdam. Fuga natus, quis totam doloribus libero aliquid illum nobis aut. Voluptatum maxime laborum
sint numquam nostrum dolor magnam, dicta iste corporis amet eveniet laudantium alias blanditiis fugit, quidem vitae
quia deserunt beatae magni nemo temporibus ipsam. Repudiandae atque cupiditate nostrum neque nobis ipsam architecto
commodi voluptatum quaerat fuga, aut inventore corporis modi minima saepe ipsa eligendi? Dolor ab sapiente pariatur
doloremque nemo delectus at accusamus libero, cum dolore eligendi. Fugiat quis atque aperiam quisquam, culpa quae
labore tempora repellendus voluptate sunt, est aliquid eligendi ullam laborum doloremque rem ut quod excepturi
consequuntur eius dolore enim incidunt ipsa pariatur! Dolorem, porro provident consequatur accusantium quis quia
obcaecati sequi, distinctio iusto magnam aliquid dicta nemo culpa eveniet. Quasi fuga eaque, deleniti dicta eligendi
ea at, quaerat recusandae fugiat animi reiciendis, inventore ipsum atque vero? Numquam illum facere quibusdam
assumenda! Excepturi modi quasi culpa debitis quia aliquam quibusdam! Sunt enim possimus nam ratione mollitia quas
amet fuga minima nihil ipsa laudantium velit odit maiores facilis vel, accusamus nulla consequatur fugit harum
pariatur quidem. Dignissimos dolorum eum vel doloremque earum molestiae voluptatem maiores labore nesciunt pariatur.
Suscipit aspernatur numquam exercitationem velit quos. Inventore nam necessitatibus iure vel ipsam porro natus
maxime vitae. Facilis, cumque qui nisi ex numquam molestias recusandae error! Accusamus, illum excepturi officia
labore exercitationem aperiam ipsum impedit repudiandae ex quos ad fugiat ut aliquam omnis dolor nemo nisi quae.
Quisquam maiores unde perspiciatis sunt debitis nesciunt neque illum aspernatur temporibus similique, nulla
voluptatem nostrum, omnis ipsa cum, aperiam vero modi a animi quia repellat delectus. Ex quod numquam nemo odit quas
nobis totam commodi! Quasi exercitationem quae officiis doloribus sed sint, fugit voluptatem voluptatum quo
voluptate veritatis saepe molestiae. Vitae consectetur quidem fuga veritatis odit deserunt consequuntur debitis,
soluta maxime. Laboriosam magnam sed id harum hic placeat, impedit nesciunt, minima rerum consectetur dolores nobis
eius. Assumenda quasi porro ab laudantium, ea itaque nostrum rem ullam deserunt? Amet aperiam molestias
voluptatibus.deleniti deserunt consectetur neque doloribus labore incidunt, error id
obcaecati repudiandae ad. Culpa, voluptatum voluptate.
</section>
<br>
<section class="chapter">
<h1>Chapter 2 def</h1>2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eligendi velit dicta sapiente
culpa dolor est officiis optio? Recusandae soluta iure minus quisquam magnam ullam vel eius facilis. Corrupti, sunt
dolores rerum corporis aliquid, ducimus deleniti deserunt consectetur neque doloribus labore incidunt, error id
obcaecati repudiandae ad. Culpa, voluptatum voluptate.
</section>
<button id="print">Print</button>
</body>
</html>
Post build event to include a file to the project
Do you need the file to be in the output directory or actually be part of the .csproj file ?
If you really want to update the csproj file then try customising the AfterBuild target in the csproj file of the startup project in your solution. All csproj files are msbuild files and you can use the full power or msbuild including callling any task. Right click on the project in the solution explorer, select unload project and then edit project. Then customise the AfterBuild target to change the particular csproj file you want. Use built in tasks or the excellent extension pack for changing the file. Finally reload the project.
HTML/CSS: Page break between grid rows
Do not treat screen and print media the same. On screen you can have menu bar, floating headers, animated stuff. You can't show these things on printed pages. The @media rule lets us specify different styles for different media.
How else would it be possible to achieve the above layout?
If the grid layout is giving trouble while printing, then we can use different CSS for printing, inside the @media print {} rule:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>@media print demo</title>
<style>
/* normal style rules */
body {
display: grid;
grid-template: 'head head' max-content 'main side' / auto 20%;
}
header {
grid-area: head;
break-after: avoid;
}
main {
grid-area: main;
}
aside {
grid-area: side;
}
section {
padding: 0.5rem 0;
break-after: auto;
}
/* override the rules for printing */
@media print {
@page {
margin: 2cm;
}
body {
/* no grid layout */
font-size: 6mm;
font-family: 'Times New Roman', Times, serif;
}
header {
break-after: avoid;
}
main {
width: 148mm;
float: left;
}
aside {
float: right;
font-size: 5mm;
font-style: italic;
margin-left: 5mm;
}
}
</style>
</head>
<body>
<header>
<h1>Lorem Ipsum</h1>
</header>
<main>
<section>
1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum elementum metus, in accumsan lacus tristique eu. Aenean quam justo, gravida ac lectus sit amet, mattis sodales ipsum. Etiam commodo libero nulla, nec hendrerit justo maximus eget.
Proin imperdiet venenatis arcu nec iaculis. Ut porttitor placerat odio, tincidunt ullamcorper ante auctor id. Aenean urna est, ornare non tellus id, sagittis ultrices est. Duis diam enim, aliquam eget mauris at, porttitor dictum urna. Donec tempor
accumsan nibh, id aliquam velit blandit vel. Integer sit amet nibh et lectus euismod iaculis.
</section>
<section>
2 Nunc rhoncus at dolor quis dignissim. Praesent eu nisi finibus tellus commodo tincidunt. Morbi at massa eget diam blandit varius. Proin ac ullamcorper erat. Suspendisse eget nibh nec mauris pharetra aliquet sit amet eu lectus. Aliquam enim nisi, facilisis
non turpis et, ultrices ultrices sapien. Vivamus maximus magna sit amet urna laoreet, quis pellentesque nibh aliquam. Quisque maximus nulla at fringilla convallis. Sed euismod congue pellentesque. Donec sit amet gravida tortor, ut blandit risus.
Mauris vel aliquet odio, sit amet porta dolor. Nulla semper fermentum quam non egestas. Donec justo tortor, cursus non urna nec, porta consectetur felis. Nullam cursus commodo leo ut sodales. Pellentesque lacinia turpis sed justo placerat convallis.
</section>
<section>
3 Donec pulvinar tortor a libero dignissim, vel maximus enim condimentum. Quisque sollicitudin risus velit, non porta enim molestie id. Suspendisse sed erat sapien. Nam nunc ligula, hendrerit a blandit et, lobortis at massa. Donec id purus ut magna feugiat
luctus tincidunt id augue. Aliquam eu nibh id ligula rutrum interdum eu eget purus. Fusce non metus ac mi facilisis rhoncus quis eget leo. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, voluptatibus!
</section>
<section>
4 Fusce aliquet blandit enim vitae porttitor. Nunc ante justo, mattis sagittis condimentum vitae, elementum sit amet urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam tellus orci, efficitur quis
interdum et, viverra sit amet magna. Praesent congue lacus malesuada, viverra sapien sit amet, cursus leo. Aliquam posuere tellus sapien, eu facilisis erat ullamcorper a. Maecenas ligula eros, maximus vitae blandit sed, viverra at purus. Phasellus
diam ipsum, convallis nec pretium malesuada, dictum non lorem. Duis cursus consequat justo sit amet vehicula. Ut metus leo, pharetra eget metus accumsan, mattis ullamcorper mi. Nulla sem ex, sagittis a orci vitae, lacinia fermentum nibh. Aliquam
egestas dui sit amet vehicula consequat. Abcd asome abckd efg.
</section>
<section>
5 Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus
ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales
pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis.
</section>
<section>
6 Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus
ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales
pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem voluptatibus voluptates repellat enim? Similique
tenetur minus ad. Totam molestias numquam esse harum, molestiae aspernatur. Asperiores, aliquam odit esse illum praesentium eos. Nobis ullam a doloremque quaerat molestiae veritatis eaque quidem. Odio quae corrupti, praesentium, sed quibusdam incidunt
ipsum harum asperiores in magni fugit nulla. Culpa eligendi natus distinctio dignissimos, facilis consequuntur, possimus repellat tenetur ipsam dolores sint. Ratione, ducimus itaque. Itaque doloribus dolores quasi quae repellendus voluptate inventore
aliquam beatae harum, sed, sit perspiciatis? Eveniet nostrum ipsam sunt modi ex quas nisi praesentium ad exercitationem, excepturi molestiae. Magni quaerat vel pariatur sint quo necessitatibus consequatur repellendus. Consectetur hic veniam natus,
deleniti distinctio tempora ipsam incidunt cum autem aspernatur tempore. A neque quaerat placeat cum consequuntur doloribus, officia quo explicabo nisi molestias, iure ipsam repellat pariatur commodi maiores ex magni in natus perferendis minima
corporis molestiae odit voluptatum fugiat? Quaerat explicabo nulla labore, odio eos iusto optio omnis quis, quidem expedita reprehenderit rerum itaque saepe natus nemo dolore! Adipisci sint sunt laudantium temporibus in illum explicabo sed dolorem,
similique possimus cumque cum eveniet et unde ducimus eaque nemo reprehenderit nisi? Omnis impedit ducimus totam nostrum quos praesentium ipsa earum facilis deleniti.
</section>
<section>
7 Proin vitae erat diam. Quisque congue commodo enim egestas varius. Quisque id arcu velit. Vestibulum pulvinar mauris eget enim aliquet tempus. Mauris rutrum interdum lacus, in pellentesque nisl. Proin feugiat, est ac ultrices aliquet, odio lectus rhoncus
ante, id consectetur lorem orci vel justo. Nunc convallis turpis purus, ut viverra nunc congue in. Nulla a nisi velit. Pellentesque in mauris quis erat dapibus dignissim non sit amet velit. Fusce id vestibulum justo. Proin non nisl eu lectus sodales
pretium eu in felis. Nam quis dignissim nulla, vel venenatis magna. Donec odio risus, eleifend vel ornare non, cursus ut turpis.
</section>
</main>
<aside>Here are some important side-notes. Which are very useful.</aside>
</body>
</html>Related Topics
Text-Align: Right; Only for Placeholder
How to Make an Input Element Occupy All Remaining Horizontal Space
Why Does Width Apply to a Button with Display Inline
How to Make Last Cell of a Row in a Table Occupy All Remaining Width
How to Make Responsive Website for All Devices
If an HTML Form Has Two <Input Type="Submit"> Buttons, How to Know Which Got Clicked
Why Is "" Being Injected into My HTML
How to Use the Same Meta Tag for Opengraph and Schema.Org
Any Way of Using Frames in HTML5
100% Width Minus Margin and Padding
Float Puts Submit Button Outside of Div