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 PDF
<div class=”video”> Remove item from exported PDF PDF substitute video for h5p – same tag
<div class=”hide-print-img”> Hide decorative images in PDF 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 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;
}

License

Share This Book