CSS Modifications currently in use
Tags to use in HTML
HTML tag | Purpose | Book Version | Notes |
<a class=”external”> | Make full URL print in PDF | ||
<div class=”video”> | Remove item from exported PDF | substitute video for h5p – same tag | |
<div class=”hide-print-img”> | Hide decorative images in PDF | ||
<span role=”insertion”> <span role=”deletion”> |
Allows editing marks to display nicely in print and PDF | Web & PDF | |
<img class=”original-img-size”> | Apply to images you don’t want to auto resize in exported PDF | CSS automatically limits image size to 50% of page | |
<div class=”largetable”> | Designate a particular table as large and change it’s font size | Web & PDF | Adjust the % for the PDF as needed. Not sure if % works in webbook |
<div class=”onlyprint”> | Use to add content to a page that will display in the PDF exports, but *not* in the online/webbook | Web & PDF | Can wrap around multiple items, but they will disappear from the WYSIWYG editor after you save/come back to the page. Do this step LAST before publication. |
<p class=”hanging-indent”> | Use to add hanging indent to references in PDF – does not work on the web book | Web & PDF |
CSS Styles to copy into Pressbooks in Custom Styles
Customized CSS for PDF exports
/*Hide images from print*/
.hide-print-img
{
display: none;
}
/*left align the textbook content*/
p {
font-weight: normal;
margin-bottom: 0;
text-align: left;
widows: 2;
orphans: 1; }
/*Provide links in Print PDF, only links that have class=”external”*/
.print a.external::after {
content: ” (” attr(href) “)”;
}
/*Underline the links in print*/
.print a {
text-decoration: underline;
}
/*Reduces size of embedded video image, and reduces space around placeholders for all interactive content*/
.interactive-content img {
max-width: 50%;
}
.interactive-content {
line-height: 1.2em;
margin-bottom: 0.5em;
padding: 0.5em 0.5em 0.5em 0.5em; }
/*Reduce padding around standard textboxes*/
.textbox, .bcc-box {
padding: 1em 1em 1em 1em;
}
/*tag H5P items and remove them from PDF version*/
.h5p{
display: none;
}
/*tag video items and remove them from PDF version*/
.video{
display: none;
}
/*Editing Marks*/
[role=”insertion”] {
color: #1215b0;
text-decoration: underline;
}
[role=”deletion”] {
color: #be0000;
text-decoration: line-through;
}
/*Align tables to center*/
table
{
margin-left:auto;
margin-right:auto;
}
/*Automatically sets max size of images to 50% of page*/
img
{
max-width: 50%;
}
/*Tell PDF export *not* to resize this image*/
.original-img-size
{
max-width: 100%;
}
/*make the text in very large tables smaller to fit in Pressbook Margins – Appendix A*/
.largetable{
font-size: 45%;
}
/*Makes the header row repeat in the PDF export for tables that span more than one page*/
table.tbody {
page-break-inside: avoid;
}
thead {
display: table-header-group;
margin-top: 100px;
}
/*Adding Book cover for the pdf */
/* -> removing the title page content text */
#half-title-page > .title{
content: “”;
padding: 0;
margin: 0;
}
/* -> Adding the Cover Img to first page of PDF export */
#half-title-page > .title::after {
width: 100%;
height: 100%;
content:url(“https://ecampusontario.pressbooks.pub/app/uploads/sites/3091/2023/02/StudentGuideCover-683×1024.png“)
}
/*hanging indent for APA references using p class=”hanging-indent” */
p.hanging-indent {
padding-left: 1em;
text-indent: -1em;
}
/* Adding margin-top to doublespace lines (apa format) not yet tested or optimized */
p.doublespace {
margin-top: 25px;
}
Customized CSS for Web book
/*Left align all the text and set margins for textbook page*/
.blockquote, .front-matter blockquote, .part blockquote, .chapter blockquote, .back-matter blockquote, body#tinymce.wp-editor blockquote {
margin: 1em 2em 1em 2em;
font-family: “Encode Sans”, sans-serif;
font-size: 0.9em;
font-style: normal;
font-weight: normal;
padding: 0 0 0 0;
letter-spacing: normal;
word-spacing: normal;
border-left: 0 none initial;
line-height: 1.4em;
text-align: left; }
.front-matter p, .part p, .chapter p, .back-matter p, body#tinymce.wp-editor p {
font-weight: normal;
margin-bottom: 0;
text-align: left;
widows: 2;
orphans: 1;
hyphens: auto;
hyphenate-before: 3;
hyphenate-after: 3;
hyphenate-lines: 2; }
.twocolumn {
margin-top: 1em;
margin-bottom: 1em;
font-size: 0.9em;
line-height: 1.4em;
text-align: left;
text-indent: 0;
column-gap: 1.5em;
column-count: 2;
column-fill: balance; }
.twocolumn p {
font-size: inherit;
line-height: 1.4em;
text-align: left;
text-indent: 0; }
.twocolumn p + p {
margin-top: 1em; }
.threecolumn {
margin-top: 1em;
margin-bottom: 1em;
font-size: 0.9em;
text-indent: 0;
text-align: left;
line-height: 1.4em;
column-gap: 1em;
column-count: 3;
column-fill: balance; }
.threecolumn p {
font-size: inherit;
line-height: 1.4em;
text-align: left;
text-indent: 0; }
.threecolumn p + p {
margin-top: 1em; }
/*Capitalize all the page titles(h1)*/
section.chapter header h1, section.front-matter header h1, section.back-matter header h1 {
display: block;
margin: 0 0 0 0;
font-family: ‘Raleway’, sans-serif;
font-size: 2em;
font-style: normal;
font-weight: 500;
hyphens: none;
line-height: 1.2em;
text-align: left;
text-transform: capitalize; }
/*Capitalize Chapter Titles*/
section.part header h1
{
text-transform: capitalize;
}
/*Border at the bottom of header*/
section.chapter header, section.front-matter header, section.back-matter header {
border-bottom: 1px solid #003180; }
/*Shift table caption to top*/
caption {
caption-side: top;
color: #000000; /*Change caption text color*/
padding-bottom: 0.75rem;
padding-top: 0.75rem;
text-align: left;
}
/*Display pointer to open summary tag*/
details summary {
cursor: pointer;
}
/*Align summary tag title with the arrow*/
details summary > * {
display: inline;
}
/*Editing Marks*/
[role=”insertion”] {
color: #1215b0;
text-decoration: underline;
}
[role=”deletion”] {
color: #be0000;
text-decoration: line-through;
}
/*Align tables to center*/
table
{
margin-left:auto;
margin-right:auto;
}
/*make the text in very large tables smaller to fit in Pressbook Margins*/
.largetable{
font-size: x-small;
}
/*tag items you don’t want to display in webbook, but show in PDF export*/
.onlyprint{
display: none;
}