{"id":24,"date":"2021-03-11T15:21:53","date_gmt":"2021-03-11T20:21:53","guid":{"rendered":"https:\/\/opentextbc.ca\/publishingstyleguide\/?post_type=chapter&#038;p=24"},"modified":"2024-03-21T17:17:20","modified_gmt":"2024-03-21T21:17:20","slug":"custom-styles","status":"publish","type":"chapter","link":"https:\/\/opentextbc.ca\/publishingstyleguide\/chapter\/custom-styles\/","title":{"raw":"Custom Styles (CSS)","rendered":"Custom Styles (CSS)"},"content":{"raw":"<div class=\"textbox textbox--sidebar\">Last update:Mar 21\/24<\/div>\r\nThe following CSS can be copied and pasted into the Custom Styles section in Pressbooks to modify the formatting of the book. The text inside the <span style=\"color: #0000ff;\">\/**\/<\/span> explains what the specific CSS does. Styles under \"Required\" are applied to every book. Styles under \"Optional\" are applied if needed.\r\n\r\nWhen editing CSS, the following resources are super helpful:\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3schools.com\/cssref\/\">CSS Properties<\/a>: A list of the types of styles and customization that can be applied through CSS.<\/li>\r\n \t<li><a href=\"https:\/\/www.w3schools.com\/cssref\/css_selectors.asp\">CSS Selectors Reference<\/a>: How to target specific elements\/classes\/etc.<\/li>\r\n<\/ul>\r\n<h1 id=\"web\">Web<\/h1>\r\n<h2>Required<\/h2>\r\n<code><span style=\"color: #0000ff;\">\/*Bolds Heading 2*\/<\/span><\/code>\r\n<code>.front-matter h2, .part h2, .chapter h2, .back-matter h2, body#tinymce.wp-editor h2 {<\/code>\r\n<code>font-weight: bold;<\/code>\r\n<code>}<\/code>\r\n<code><span style=\"color: #0000ff;\">\/*Bolds Heading 3s and left aligns them*\/<\/span><\/code>\r\n<code>.front-matter h3, .part h3, .chapter h3, .back-matter h3, body#tinymce.wp-editor h3 {<\/code>\r\n<code>font-weight: bold;<\/code>\r\n<code>text-align: left;<\/code>\r\n<code>}<\/code>\r\n\r\n<span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Standardizes textbox title styles when they are marked as headings. These styles are for Clarke theme. Change values for other themes if desired.*\/<\/span><\/code><\/span>\r\n<code>h1.textbox__title, h2.textbox__title, h3.textbox__title, h4.textbox__title, h5.textbox__title, h6.textbox__title {<\/code>\r\n<code>padding: 1.1111111111em 1.1111111111em 1.1111111111em 1.1111111111em;<\/code>\r\n<code>margin: -1.1111111111em -1.1111111111em -1em -1.1111111111em;<\/code>\r\n<code>font-size: 0.9em;<\/code>\r\n<code>color: #fff;<\/code>\r\n<code>text-align: left;\r\nfont-weight: normal;\r\nfont-style: normal;\r\n<\/code><code><\/code><code>}<\/code><code><\/code><code><\/code>\r\n<code><span style=\"color: #0000ff;\">\/*Fix table accessibility and display*\/<\/span><\/code>\r\n<code>.front-matter td, .part td, .chapter td, .back-matter td, body#tinymce.wp-editor td {<\/code>\r\n<code>border: 1px solid;<\/code>\r\n<code>border-color: #373d3f;<\/code>\r\n<code>}<\/code>\r\n<code>.front-matter th, .part th, .chapter th, .back-matter th, body#tinymce.wp-editor th {<\/code>\r\n<code>border: 1px solid;<\/code>\r\n<code>border-color: #373d3f;<\/code>\r\n<code>}<\/code>\r\n<code>#content table caption {<\/code>\r\n<code>caption-side: top;<\/code>\r\n<code>color:#000;<\/code>\r\n<code>text-align: center; }<\/code>\r\n\r\n<code><\/code><code>td p, .chapter td p + p, td, .back-matter td p + p, td li, td li + li, .chapter td li + li, .chapter td li, td ul{<\/code>\r\n<code>font-size: inherit;<\/code>\r\n<code>line-height: inherit;<\/code>\r\n<code>margin-top: inherit;<\/code>\r\n<code>}<\/code>\r\n\r\n<span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Match font size in multicolumn lists*\/\u00a0<\/span><\/code><\/span>\r\n<code>.twocolumn, .threecolumn{\u00a0<\/code>\r\n<code>\u00a0 font-size: inherit; }\r\n<\/code>\r\n\r\n<span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Styles for end-of-chapter content (image descriptions and attributions headings)*\/<\/span><\/code><\/span>\r\n<code>h1.eocp {<\/code>\r\n<code>font-size: 0.9em;<\/code>\r\n<code>padding-top: 4em;<\/code>\r\n<code>}<\/code>\r\n<code>h1.eoc {<\/code>\r\n<code>font-size: 0.9em;<\/code>\r\n<code>}<\/code>\r\n\r\n<code><span style=\"color: #0000ff;\">\/*avoid words breaking across lines*\/<\/span> <\/code>\r\n<code>.front-matter p, .part p, .chapter p, .back-matter p, body#tinymce.wp-editor p, .front-matter, .part, .chapter, .back-matter, body#tinymce.wp-editor { <\/code>\r\n<code>word-break: normal; <\/code>\r\n<code>hyphens: manual; <\/code>\r\n<code>}<\/code>\r\n<h1 id=\"pdf\">PDF<\/h1>\r\n<h2>Required<\/h2>\r\n<div class=\"textbox\">\r\n\r\nThe required CSS for PDFs is more robust than Web and EBook. This is because it includes the following:\r\n<ul>\r\n \t<li><strong>Provide web addresses of link in Print PDF:<\/strong> This CSS will insert the web address in parentheses following the link text of a link in the Print PDF only. This makes it so people using the print version will be able to access those links. Note that this will also affect internal links - to omit internal links, add <code>class=\"internal\"<\/code> to the link's HTML. This replaces our previous practice of creating a list of links in the back matter.<\/li>\r\n \t<li><strong>Prevent textbox headers from being on different pages from their content:<\/strong> This ensures that a page break will not separate a textbox from its header.<\/li>\r\n \t<li><strong>Left-align regular text:<\/strong> By default, regular text in the PDF is justified (meaning words are spaced so that the left and right edges of a paragraph are perfectly straight). This causes irregular spacing that is not good for accessibility as it makes it harder to read. As such, we've added CSS to left-align regular text instead.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<code><span style=\"color: #0000ff;\">\/*Bolds Heading 2*\/<\/span><\/code>\r\n<code>.front-matter h2, .part h2, .chapter h2, .back-matter h2, body#tinymce.wp-editor h2 {<\/code>\r\n<code>font-weight: bold;<\/code>\r\n<code>}<\/code>\r\n<code><span style=\"color: #0000ff;\">\/*Bolds Heading 3s and left aligns them*\/<\/span><\/code>\r\n<code>.front-matter h3, .part h3, .chapter h3, .back-matter h3, body#tinymce.wp-editor h3 {<\/code>\r\n<code>font-weight: bold;<\/code>\r\n<code>text-align: left;<\/code>\r\n<code>}<\/code>\r\n\r\n<code><span style=\"color: #0000ff;\">\/*Standardizes textbox title styles when they are marked as headings. These styles are for Clarke theme. Change values for other themes if desired.*\/<\/span><\/code>\r\n<code>h1.textbox__title, h2.textbox__title, h3.textbox__title, h4.textbox__title, h5.textbox__title, h6.textbox__title {<\/code>\r\n<code>padding: 1.1111111111em 1.1111111111em 1.1111111111em 1.1111111111em;<\/code>\r\n<code>margin: -1.1111111111em -1.1111111111em -1em -1.1111111111em;<\/code>\r\n<code>font-size: 0.9em;<\/code>\r\n<code>color: #fff;<\/code>\r\n<code>text-align: left;\r\nfont-weight: normal;\r\nfont-style: normal;\r\n<\/code><code><\/code><code>}<\/code><code><\/code><code><\/code><code><\/code>\r\n<code><span style=\"color: #0000ff;\">\/*Fix table accessibility and display*\/<\/span><\/code>\r\n<code>.front-matter td, .part td, .chapter td, .back-matter td, body#tinymce.wp-editor td {<\/code>\r\n<code>border: 1px solid;<\/code>\r\n<code>border-color: #373d3f;<\/code>\r\n<code>}<\/code>\r\n<code>.front-matter th, .part th, .chapter th, .back-matter th, body#tinymce.wp-editor th {<\/code>\r\n<code>border: 1px solid;<\/code>\r\n<code>border-color: #373d3f;<\/code>\r\n<code>}<\/code>\r\n<code>#content table caption {<\/code>\r\n<code>caption-side: top;<\/code>\r\n<code>color:#000;<\/code>\r\n<code>text-align: center; }<\/code>\r\n\r\n<code>td p, .chapter td p + p, td, .back-matter td p + p, td li, td li + li, .chapter td li + li, .chapter td li, td ul{<\/code>\r\n<code>font-size: inherit;<\/code>\r\n<code>line-height: inherit;<\/code>\r\n<code>margin-top: inherit;<\/code>\r\n<code>}<\/code><code><\/code>\r\n<code><span style=\"color: #0000ff;\">\/*Prevents textbox headers being on different pages from their content*\/<\/span><\/code>\r\n<code>.textbox__header {<\/code>\r\n<code>page-break-after: avoid;<\/code>\r\n<code>}<\/code>\r\n<code><span style=\"color: #0000ff;\">\/*Change text alignment from justified to left-aligned (makes text more readable)*\/<\/span><\/code>\r\n<code>p {<\/code>\r\n<code>text-align: left;<\/code>\r\n<code>}<\/code>\r\n<code><span style=\"color: #0000ff;\">\/*Makes it so centre\/right\/left-aligned images in the PDF without captions will have text wrap properly*\/<\/span><\/code>\r\n<code>img.alignright {<\/code>\r\n<code>float: right;<\/code>\r\n<code>margin-left: .5em;<\/code>\r\n<code>}<\/code>\r\n<code>img.alignleft {<\/code>\r\n<code>float: left;<\/code>\r\n<code>}<\/code>\r\n<code>img.aligncenter {<\/code>\r\n<code>display: block;<\/code>\r\n<code>margin-left: auto;<\/code>\r\n<code>margin-right: auto; }<\/code>\r\n\r\n<code><span style=\"color: #0000ff;\">\/*Ensures all text on copyright page is the same size*\/<\/span>\r\n#copyright-page li, #copyright-page .textbox {\r\nfont-size: 0.75em;\r\n}<\/code>\r\n\r\n<code><span style=\"color: #0000ff;\">\/*Match font size in multicolumn lists*\/\u00a0<\/span><\/code>\r\n<code>.twocolumn, .threecolumn{\u00a0<\/code>\r\n<code>\u00a0 font-size: inherit;\u00a0}\u00a0<\/code>\r\n\r\n<span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Provide web addresses of links in Print PDF, except for internal links and anchor tags*\/<\/span><\/code><\/span>\r\n<code>.print a:not(.internal, a[href*=\"chapter\"], a[href*=\"part\"], a[href*=\"front-matter\"], a[id])::after {<\/code>\r\n<code>content: \" (\" attr(href) \")\";<\/code>\r\n<code>}<\/code>\r\n\r\n<code><span style=\"color: #0000ff;\">\/*Force linebreak for URL strings in Print PDF*\/<\/span><\/code>\r\n<code>.print a:not(.internal, a[href*=\"chapter\"], a[href*=\"part\"], a[href*=\"front-matter\"], a[id])::after {<\/code>\r\n<code>content: \" (\" attr(href) \")\";<\/code>\r\n<code>word-break: break-all;<\/code>\r\n<code>}<\/code>\r\n<h2>Optional<\/h2>\r\n<code><span style=\"color: #0000ff;\">\/*Provide web addresses of links in Print PDF, but not links that have class=\"internal\"*\/<\/span><\/code>\r\n<code>.print a:not(.internal)::after {<\/code>\r\n<code>content: \" (\" attr(href) \")\";<\/code>\r\n<code>}<\/code>\r\n\r\n<span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Provide links in Print PDF, only links that have class=\"external\"*\/<\/span><\/code><\/span>\r\n<code>.print a.external::after {<\/code>\r\n<code>content: \" (\" attr(href) \")\";<\/code>\r\n<code>}<\/code><code><\/code>\r\n\r\n<code><span style=\"color: #0000ff;\">\/*Reduces size of embedded video image, and reduces space around placeholders for all interactive content*\/<\/span><\/code>\r\n<code>.interactive-content img {<\/code>\r\n<code>max-width: 50%;<\/code>\r\n<code>}<\/code>\r\n<code>.interactive-content {<\/code>\r\n<code>line-height: 1.2em;<\/code>\r\n<code>margin-bottom: 0.5em;<\/code>\r\n<code>padding: 0.5em 0.5em 0.5em 0.5em; }<\/code>\r\n<code><span style=\"color: #0000ff;\">\/*Reduce padding around standard textboxes*\/<\/span><\/code>\r\n<code>.textbox, .bcc-box {<\/code>\r\n<code>padding: 1em 1em 1em 1em;<\/code>\r\n<code>}<\/code>\r\n<code><span style=\"color: #0000ff;\">\/*reduce size of media attributions in PDF*\/<\/span><\/code>\r\n<code>div[class^=\"media-attributions\"] {<\/code>\r\n<code>font-size: 0.7em;<\/code>\r\n<code>margin-top: 0.2em;<\/code>\r\n<code>}<\/code>\r\n<code>div[class^=\"media-attributions\"] li {<\/code>\r\n<code>padding: 0;<\/code>\r\n<code>line-height: 0.9em;<\/code>\r\n<code>}<\/code>\r\n\r\n<span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Indent chapter headings in the table of contents (when using two-level table of contents)*\/<\/span><\/code><\/span>\r\n<code>.toc-subsection-title {<\/code>\r\n<code>text-indent: 20px;<\/code>\r\n<code>}<\/code>\r\n\r\n<code><span style=\"color: #0000ff;\">\/*Allow tables to be broken across pages*\/<\/span><\/code>\r\n<code>\/*auto page break in tables*\/<\/code>\r\n<code>.front-matter table, .part table, .chapter table, .back-matter table,\u202fbody#tinymce.wp-editor\u202ftable {<\/code>\r\n<code>page-break-inside: auto;<\/code>\r\n<code>}<\/code>\r\n<code><span style=\"color: #0000ff;\">\/*Avoid footnotes breaking across pages*\/<\/span><\/code>\r\n<code>.footnote{<\/code>\r\n<code>page-break-inside: avoid;<\/code>\r\n<code>}<\/code>\r\n<h1 id=\"ebook\">Ebook<\/h1>\r\n<h2>Required<\/h2>\r\n<code><span style=\"color: #0000ff;\">\/*Bolds Heading 2*\/<\/span><\/code>\r\n<code>.front-matter h2, .part h2, .chapter h2, .back-matter h2, body#tinymce.wp-editor h2 {<\/code>\r\n<code>font-weight: bold;<\/code>\r\n<code>}<\/code>\r\n<code><span style=\"color: #0000ff;\">\/*Bolds Heading 3s and left aligns them*\/<\/span><\/code>\r\n<code>.front-matter h3, .part h3, .chapter h3, .back-matter h3, body#tinymce.wp-editor h3 {<\/code>\r\n<code>font-weight: bold;<\/code>\r\n<code>text-align: left;<\/code>\r\n<code>}<\/code>\r\n\r\n<code><span style=\"color: #0000ff;\">\/*Standardizes textbox title styles when they are marked as headings. These styles are for Clarke theme. Change values for other themes if desired.*\/<\/span><\/code>\r\n<code>h1.textbox__title, h2.textbox__title, h3.textbox__title, h4.textbox__title, h5.textbox__title, h6.textbox__title {<\/code>\r\n<code>padding: 1.1111111111em 1.1111111111em 1.1111111111em 1.1111111111em;<\/code>\r\n<code>margin: -1.1111111111em -1.1111111111em -1em -1.1111111111em;<\/code>\r\n<code>font-size: 0.9em;<\/code>\r\n<code>color: #fff;<\/code>\r\n<code>text-align: left;\r\nfont-weight: normal;\r\nfont-style: normal;\r\n<\/code><code><\/code><code>}<\/code><code><\/code>\r\n<code><span style=\"color: #0000ff;\">\/*Fix table accessibility\/display*\/<\/span><\/code>\r\n<code>.front-matter td, .part td, .chapter td, .back-matter td, body#tinymce.wp-editor td {<\/code>\r\n<code>border: 1px solid;<\/code>\r\n<code>border-color: #373d3f;<\/code>\r\n<code>}<\/code>\r\n<code>.front-matter th, .part th, .chapter th, .back-matter th, body#tinymce.wp-editor th {<\/code>\r\n<code>border: 1px solid;<\/code>\r\n<code>border-color: #373d3f;<\/code>\r\n<code>}<\/code>\r\n<code>#content table caption {<\/code>\r\n<code>caption-side: top;<\/code>\r\n<code>color:#000;<\/code>\r\n<code>text-align: center; }<\/code>\r\n\r\n<code>td p, .chapter td p + p, td, .back-matter td p + p, td li, td li + li, .chapter td li + li, .chapter td li, td ul{<\/code>\r\n<code>font-size: inherit;<\/code>\r\n<code>line-height: inherit;<\/code>\r\n<code>margin-top: inherit;<\/code>\r\n<code>}<\/code><code><\/code>\r\n<code><span style=\"color: #0000ff;\">\/*Makes it so videos inside textboxes aren't larger than the textboxes*\/<\/span><\/code>\r\n<code>div iframe {<\/code>\r\n<code>max-width: 98%;<\/code>\r\n<code>}<\/code>\r\n\r\n<code>\/*Match font size in multicolumn lists*\/\u00a0<\/code>\r\n<code>.twocolumn, .threecolumn{\u00a0<\/code>\r\n<code>\u00a0 font-size: inherit;\u00a0}\u00a0<\/code>\r\n<h2>Optional<\/h2>\r\n<code>\/*Fixes an issues with right\/left aligned images that are oversized and overlapping with content*\/<\/code>\r\n<p class=\"x_x_x_xxmsonormal\"><code>.wp-caption.alignright, .wp-caption.alignleft {<\/code><\/p>\r\n<p class=\"x_x_x_xxmsonormal\"><code>\u00a0 width: 25% !important;<\/code><\/p>\r\n<p class=\"x_x_x_xxmsonormal\"><code>}<\/code><\/p>\r\n<p class=\"x_x_x_xxmsonormal\">OR<\/p>\r\n<p class=\"x_x_x_xxmsonormal\"><code>.wp-caption.alignright, .wp-caption.alignleft {<\/code><\/p>\r\n<p class=\"x_x_x_xxmsonormal\"><code>\u00a0 width: 194px !important;<\/code><\/p>\r\n<p class=\"x_x_x_xxmsonormal\"><code>}<\/code><\/p>\r\n\r\n<h1 id=\"other\">Other Solutions<\/h1>\r\nThe following are CSS solutions developed for specific books that may be useful in the future but are generally not applicable to most books.\r\n\r\n<code><span style=\"color: #0000ff;\">\/*Increases width of sidebar textboxes*\/<\/span><\/code>\r\n<code>.textbox--sidebar {<\/code>\r\n<code>margin: 1em 0 1em 1em;<\/code>\r\n<code>max-width: 50%; }<\/code>\r\n\r\n<span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Reduce padding around special textbox headings*\/<\/span><\/code><\/span><code><\/code>\r\n<code>.textbox.textbox--learning-objectives .textbox__header, .bcc-box.textbox--learning-objectives .textbox__header {<\/code>\r\n<code>padding: 0.3em 1em 0.1em 1em;<\/code>\r\n<code>}<\/code>\r\n<code>.textbox.textbox--exercises .textbox__header, .bcc-box.textbox--exercises .textbox__header {<\/code>\r\n<code>padding: 0.3em 1em 0.1em 1em;<\/code>\r\n<code>}<\/code>\r\n<code>.textbox.textbox--examples .textbox__header, .bcc-box.textbox--examples .textbox__header {<\/code>\r\n<code>padding: 0.3em 1em 0.1em 1em;<\/code>\r\n<code>}<\/code>\r\n<code>.textbox.textbox--key-takeaways .textbox__header, .bcc-box.textbox--key-takeaways .textbox__header {<\/code>\r\n<code>padding: 0.3em 1em 0.1em 1em;<\/code>\r\n<code>}<\/code>\r\n\r\n<span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Increase space between list items*\/<\/span><\/code><\/span>\r\n<code>ol.space li {<\/code>\r\n<code>margin-bottom: 30px;<\/code>\r\n<code>}<\/code>\r\n\r\n<code><span style=\"color: #0000ff;\">\/*Style for blank spaces - all text with this class will be white with a black underline.*\/<\/span>\r\n.blankspace {\r\ncolor: #fff;\r\ntext-decoration: underline;\r\ntext-decoration-color: black;\r\n}<\/code><code><\/code><code><\/code>","rendered":"<div class=\"textbox textbox--sidebar\">Last update:Mar 21\/24<\/div>\n<p>The following CSS can be copied and pasted into the Custom Styles section in Pressbooks to modify the formatting of the book. The text inside the <span style=\"color: #0000ff;\">\/**\/<\/span> explains what the specific CSS does. Styles under &#8220;Required&#8221; are applied to every book. Styles under &#8220;Optional&#8221; are applied if needed.<\/p>\n<p>When editing CSS, the following resources are super helpful:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3schools.com\/cssref\/\">CSS Properties<\/a>: A list of the types of styles and customization that can be applied through CSS.<\/li>\n<li><a href=\"https:\/\/www.w3schools.com\/cssref\/css_selectors.asp\">CSS Selectors Reference<\/a>: How to target specific elements\/classes\/etc.<\/li>\n<\/ul>\n<h1 id=\"web\">Web<\/h1>\n<h2>Required<\/h2>\n<p><code><span style=\"color: #0000ff;\">\/*Bolds Heading 2*\/<\/span><\/code><br \/>\n<code>.front-matter h2, .part h2, .chapter h2, .back-matter h2, body#tinymce.wp-editor h2 {<\/code><br \/>\n<code>font-weight: bold;<\/code><br \/>\n<code>}<\/code><br \/>\n<code><span style=\"color: #0000ff;\">\/*Bolds Heading 3s and left aligns them*\/<\/span><\/code><br \/>\n<code>.front-matter h3, .part h3, .chapter h3, .back-matter h3, body#tinymce.wp-editor h3 {<\/code><br \/>\n<code>font-weight: bold;<\/code><br \/>\n<code>text-align: left;<\/code><br \/>\n<code>}<\/code><\/p>\n<p><span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Standardizes textbox title styles when they are marked as headings. These styles are for Clarke theme. Change values for other themes if desired.*\/<\/span><\/code><\/span><br \/>\n<code>h1.textbox__title, h2.textbox__title, h3.textbox__title, h4.textbox__title, h5.textbox__title, h6.textbox__title {<\/code><br \/>\n<code>padding: 1.1111111111em 1.1111111111em 1.1111111111em 1.1111111111em;<\/code><br \/>\n<code>margin: -1.1111111111em -1.1111111111em -1em -1.1111111111em;<\/code><br \/>\n<code>font-size: 0.9em;<\/code><br \/>\n<code>color: #fff;<\/code><br \/>\n<code>text-align: left;<br \/>\nfont-weight: normal;<br \/>\nfont-style: normal;<br \/>\n<\/code><code><\/code><code>}<\/code><code><\/code><code><\/code><br \/>\n<code><span style=\"color: #0000ff;\">\/*Fix table accessibility and display*\/<\/span><\/code><br \/>\n<code>.front-matter td, .part td, .chapter td, .back-matter td, body#tinymce.wp-editor td {<\/code><br \/>\n<code>border: 1px solid;<\/code><br \/>\n<code>border-color: #373d3f;<\/code><br \/>\n<code>}<\/code><br \/>\n<code>.front-matter th, .part th, .chapter th, .back-matter th, body#tinymce.wp-editor th {<\/code><br \/>\n<code>border: 1px solid;<\/code><br \/>\n<code>border-color: #373d3f;<\/code><br \/>\n<code>}<\/code><br \/>\n<code>#content table caption {<\/code><br \/>\n<code>caption-side: top;<\/code><br \/>\n<code>color:#000;<\/code><br \/>\n<code>text-align: center; }<\/code><\/p>\n<p><code><\/code><code>td p, .chapter td p + p, td, .back-matter td p + p, td li, td li + li, .chapter td li + li, .chapter td li, td ul{<\/code><br \/>\n<code>font-size: inherit;<\/code><br \/>\n<code>line-height: inherit;<\/code><br \/>\n<code>margin-top: inherit;<\/code><br \/>\n<code>}<\/code><\/p>\n<p><span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Match font size in multicolumn lists*\/\u00a0<\/span><\/code><\/span><br \/>\n<code>.twocolumn, .threecolumn{\u00a0<\/code><br \/>\n<code>\u00a0 font-size: inherit; }<br \/>\n<\/code><\/p>\n<p><span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Styles for end-of-chapter content (image descriptions and attributions headings)*\/<\/span><\/code><\/span><br \/>\n<code>h1.eocp {<\/code><br \/>\n<code>font-size: 0.9em;<\/code><br \/>\n<code>padding-top: 4em;<\/code><br \/>\n<code>}<\/code><br \/>\n<code>h1.eoc {<\/code><br \/>\n<code>font-size: 0.9em;<\/code><br \/>\n<code>}<\/code><\/p>\n<p><code><span style=\"color: #0000ff;\">\/*avoid words breaking across lines*\/<\/span> <\/code><br \/>\n<code>.front-matter p, .part p, .chapter p, .back-matter p, body#tinymce.wp-editor p, .front-matter, .part, .chapter, .back-matter, body#tinymce.wp-editor { <\/code><br \/>\n<code>word-break: normal; <\/code><br \/>\n<code>hyphens: manual; <\/code><br \/>\n<code>}<\/code><\/p>\n<h1 id=\"pdf\">PDF<\/h1>\n<h2>Required<\/h2>\n<div class=\"textbox\">\n<p>The required CSS for PDFs is more robust than Web and EBook. This is because it includes the following:<\/p>\n<ul>\n<li><strong>Provide web addresses of link in Print PDF:<\/strong> This CSS will insert the web address in parentheses following the link text of a link in the Print PDF only. This makes it so people using the print version will be able to access those links. Note that this will also affect internal links &#8211; to omit internal links, add <code>class=\"internal\"<\/code> to the link&#8217;s HTML. This replaces our previous practice of creating a list of links in the back matter.<\/li>\n<li><strong>Prevent textbox headers from being on different pages from their content:<\/strong> This ensures that a page break will not separate a textbox from its header.<\/li>\n<li><strong>Left-align regular text:<\/strong> By default, regular text in the PDF is justified (meaning words are spaced so that the left and right edges of a paragraph are perfectly straight). This causes irregular spacing that is not good for accessibility as it makes it harder to read. As such, we&#8217;ve added CSS to left-align regular text instead.<\/li>\n<\/ul>\n<\/div>\n<p><code><span style=\"color: #0000ff;\">\/*Bolds Heading 2*\/<\/span><\/code><br \/>\n<code>.front-matter h2, .part h2, .chapter h2, .back-matter h2, body#tinymce.wp-editor h2 {<\/code><br \/>\n<code>font-weight: bold;<\/code><br \/>\n<code>}<\/code><br \/>\n<code><span style=\"color: #0000ff;\">\/*Bolds Heading 3s and left aligns them*\/<\/span><\/code><br \/>\n<code>.front-matter h3, .part h3, .chapter h3, .back-matter h3, body#tinymce.wp-editor h3 {<\/code><br \/>\n<code>font-weight: bold;<\/code><br \/>\n<code>text-align: left;<\/code><br \/>\n<code>}<\/code><\/p>\n<p><code><span style=\"color: #0000ff;\">\/*Standardizes textbox title styles when they are marked as headings. These styles are for Clarke theme. Change values for other themes if desired.*\/<\/span><\/code><br \/>\n<code>h1.textbox__title, h2.textbox__title, h3.textbox__title, h4.textbox__title, h5.textbox__title, h6.textbox__title {<\/code><br \/>\n<code>padding: 1.1111111111em 1.1111111111em 1.1111111111em 1.1111111111em;<\/code><br \/>\n<code>margin: -1.1111111111em -1.1111111111em -1em -1.1111111111em;<\/code><br \/>\n<code>font-size: 0.9em;<\/code><br \/>\n<code>color: #fff;<\/code><br \/>\n<code>text-align: left;<br \/>\nfont-weight: normal;<br \/>\nfont-style: normal;<br \/>\n<\/code><code><\/code><code>}<\/code><code><\/code><code><\/code><code><\/code><br \/>\n<code><span style=\"color: #0000ff;\">\/*Fix table accessibility and display*\/<\/span><\/code><br \/>\n<code>.front-matter td, .part td, .chapter td, .back-matter td, body#tinymce.wp-editor td {<\/code><br \/>\n<code>border: 1px solid;<\/code><br \/>\n<code>border-color: #373d3f;<\/code><br \/>\n<code>}<\/code><br \/>\n<code>.front-matter th, .part th, .chapter th, .back-matter th, body#tinymce.wp-editor th {<\/code><br \/>\n<code>border: 1px solid;<\/code><br \/>\n<code>border-color: #373d3f;<\/code><br \/>\n<code>}<\/code><br \/>\n<code>#content table caption {<\/code><br \/>\n<code>caption-side: top;<\/code><br \/>\n<code>color:#000;<\/code><br \/>\n<code>text-align: center; }<\/code><\/p>\n<p><code>td p, .chapter td p + p, td, .back-matter td p + p, td li, td li + li, .chapter td li + li, .chapter td li, td ul{<\/code><br \/>\n<code>font-size: inherit;<\/code><br \/>\n<code>line-height: inherit;<\/code><br \/>\n<code>margin-top: inherit;<\/code><br \/>\n<code>}<\/code><code><\/code><br \/>\n<code><span style=\"color: #0000ff;\">\/*Prevents textbox headers being on different pages from their content*\/<\/span><\/code><br \/>\n<code>.textbox__header {<\/code><br \/>\n<code>page-break-after: avoid;<\/code><br \/>\n<code>}<\/code><br \/>\n<code><span style=\"color: #0000ff;\">\/*Change text alignment from justified to left-aligned (makes text more readable)*\/<\/span><\/code><br \/>\n<code>p {<\/code><br \/>\n<code>text-align: left;<\/code><br \/>\n<code>}<\/code><br \/>\n<code><span style=\"color: #0000ff;\">\/*Makes it so centre\/right\/left-aligned images in the PDF without captions will have text wrap properly*\/<\/span><\/code><br \/>\n<code>img.alignright {<\/code><br \/>\n<code>float: right;<\/code><br \/>\n<code>margin-left: .5em;<\/code><br \/>\n<code>}<\/code><br \/>\n<code>img.alignleft {<\/code><br \/>\n<code>float: left;<\/code><br \/>\n<code>}<\/code><br \/>\n<code>img.aligncenter {<\/code><br \/>\n<code>display: block;<\/code><br \/>\n<code>margin-left: auto;<\/code><br \/>\n<code>margin-right: auto; }<\/code><\/p>\n<p><code><span style=\"color: #0000ff;\">\/*Ensures all text on copyright page is the same size*\/<\/span><br \/>\n#copyright-page li, #copyright-page .textbox {<br \/>\nfont-size: 0.75em;<br \/>\n}<\/code><\/p>\n<p><code><span style=\"color: #0000ff;\">\/*Match font size in multicolumn lists*\/\u00a0<\/span><\/code><br \/>\n<code>.twocolumn, .threecolumn{\u00a0<\/code><br \/>\n<code>\u00a0 font-size: inherit;\u00a0}\u00a0<\/code><\/p>\n<p><span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Provide web addresses of links in Print PDF, except for internal links and anchor tags*\/<\/span><\/code><\/span><br \/>\n<code>.print a:not(.internal, a[href*=\"chapter\"], a[href*=\"part\"], a[href*=\"front-matter\"], a[id])::after {<\/code><br \/>\n<code>content: \" (\" attr(href) \")\";<\/code><br \/>\n<code>}<\/code><\/p>\n<p><code><span style=\"color: #0000ff;\">\/*Force linebreak for URL strings in Print PDF*\/<\/span><\/code><br \/>\n<code>.print a:not(.internal, a[href*=\"chapter\"], a[href*=\"part\"], a[href*=\"front-matter\"], a[id])::after {<\/code><br \/>\n<code>content: \" (\" attr(href) \")\";<\/code><br \/>\n<code>word-break: break-all;<\/code><br \/>\n<code>}<\/code><\/p>\n<h2>Optional<\/h2>\n<p><code><span style=\"color: #0000ff;\">\/*Provide web addresses of links in Print PDF, but not links that have class=\"internal\"*\/<\/span><\/code><br \/>\n<code>.print a:not(.internal)::after {<\/code><br \/>\n<code>content: \" (\" attr(href) \")\";<\/code><br \/>\n<code>}<\/code><\/p>\n<p><span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Provide links in Print PDF, only links that have class=\"external\"*\/<\/span><\/code><\/span><br \/>\n<code>.print a.external::after {<\/code><br \/>\n<code>content: \" (\" attr(href) \")\";<\/code><br \/>\n<code>}<\/code><code><\/code><\/p>\n<p><code><span style=\"color: #0000ff;\">\/*Reduces size of embedded video image, and reduces space around placeholders for all interactive content*\/<\/span><\/code><br \/>\n<code>.interactive-content img {<\/code><br \/>\n<code>max-width: 50%;<\/code><br \/>\n<code>}<\/code><br \/>\n<code>.interactive-content {<\/code><br \/>\n<code>line-height: 1.2em;<\/code><br \/>\n<code>margin-bottom: 0.5em;<\/code><br \/>\n<code>padding: 0.5em 0.5em 0.5em 0.5em; }<\/code><br \/>\n<code><span style=\"color: #0000ff;\">\/*Reduce padding around standard textboxes*\/<\/span><\/code><br \/>\n<code>.textbox, .bcc-box {<\/code><br \/>\n<code>padding: 1em 1em 1em 1em;<\/code><br \/>\n<code>}<\/code><br \/>\n<code><span style=\"color: #0000ff;\">\/*reduce size of media attributions in PDF*\/<\/span><\/code><br \/>\n<code>div[class^=\"media-attributions\"] {<\/code><br \/>\n<code>font-size: 0.7em;<\/code><br \/>\n<code>margin-top: 0.2em;<\/code><br \/>\n<code>}<\/code><br \/>\n<code>div[class^=\"media-attributions\"] li {<\/code><br \/>\n<code>padding: 0;<\/code><br \/>\n<code>line-height: 0.9em;<\/code><br \/>\n<code>}<\/code><\/p>\n<p><span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Indent chapter headings in the table of contents (when using two-level table of contents)*\/<\/span><\/code><\/span><br \/>\n<code>.toc-subsection-title {<\/code><br \/>\n<code>text-indent: 20px;<\/code><br \/>\n<code>}<\/code><\/p>\n<p><code><span style=\"color: #0000ff;\">\/*Allow tables to be broken across pages*\/<\/span><\/code><br \/>\n<code>\/*auto page break in tables*\/<\/code><br \/>\n<code>.front-matter table, .part table, .chapter table, .back-matter table,\u202fbody#tinymce.wp-editor\u202ftable {<\/code><br \/>\n<code>page-break-inside: auto;<\/code><br \/>\n<code>}<\/code><br \/>\n<code><span style=\"color: #0000ff;\">\/*Avoid footnotes breaking across pages*\/<\/span><\/code><br \/>\n<code>.footnote{<\/code><br \/>\n<code>page-break-inside: avoid;<\/code><br \/>\n<code>}<\/code><\/p>\n<h1 id=\"ebook\">Ebook<\/h1>\n<h2>Required<\/h2>\n<p><code><span style=\"color: #0000ff;\">\/*Bolds Heading 2*\/<\/span><\/code><br \/>\n<code>.front-matter h2, .part h2, .chapter h2, .back-matter h2, body#tinymce.wp-editor h2 {<\/code><br \/>\n<code>font-weight: bold;<\/code><br \/>\n<code>}<\/code><br \/>\n<code><span style=\"color: #0000ff;\">\/*Bolds Heading 3s and left aligns them*\/<\/span><\/code><br \/>\n<code>.front-matter h3, .part h3, .chapter h3, .back-matter h3, body#tinymce.wp-editor h3 {<\/code><br \/>\n<code>font-weight: bold;<\/code><br \/>\n<code>text-align: left;<\/code><br \/>\n<code>}<\/code><\/p>\n<p><code><span style=\"color: #0000ff;\">\/*Standardizes textbox title styles when they are marked as headings. These styles are for Clarke theme. Change values for other themes if desired.*\/<\/span><\/code><br \/>\n<code>h1.textbox__title, h2.textbox__title, h3.textbox__title, h4.textbox__title, h5.textbox__title, h6.textbox__title {<\/code><br \/>\n<code>padding: 1.1111111111em 1.1111111111em 1.1111111111em 1.1111111111em;<\/code><br \/>\n<code>margin: -1.1111111111em -1.1111111111em -1em -1.1111111111em;<\/code><br \/>\n<code>font-size: 0.9em;<\/code><br \/>\n<code>color: #fff;<\/code><br \/>\n<code>text-align: left;<br \/>\nfont-weight: normal;<br \/>\nfont-style: normal;<br \/>\n<\/code><code><\/code><code>}<\/code><code><\/code><br \/>\n<code><span style=\"color: #0000ff;\">\/*Fix table accessibility\/display*\/<\/span><\/code><br \/>\n<code>.front-matter td, .part td, .chapter td, .back-matter td, body#tinymce.wp-editor td {<\/code><br \/>\n<code>border: 1px solid;<\/code><br \/>\n<code>border-color: #373d3f;<\/code><br \/>\n<code>}<\/code><br \/>\n<code>.front-matter th, .part th, .chapter th, .back-matter th, body#tinymce.wp-editor th {<\/code><br \/>\n<code>border: 1px solid;<\/code><br \/>\n<code>border-color: #373d3f;<\/code><br \/>\n<code>}<\/code><br \/>\n<code>#content table caption {<\/code><br \/>\n<code>caption-side: top;<\/code><br \/>\n<code>color:#000;<\/code><br \/>\n<code>text-align: center; }<\/code><\/p>\n<p><code>td p, .chapter td p + p, td, .back-matter td p + p, td li, td li + li, .chapter td li + li, .chapter td li, td ul{<\/code><br \/>\n<code>font-size: inherit;<\/code><br \/>\n<code>line-height: inherit;<\/code><br \/>\n<code>margin-top: inherit;<\/code><br \/>\n<code>}<\/code><code><\/code><br \/>\n<code><span style=\"color: #0000ff;\">\/*Makes it so videos inside textboxes aren't larger than the textboxes*\/<\/span><\/code><br \/>\n<code>div iframe {<\/code><br \/>\n<code>max-width: 98%;<\/code><br \/>\n<code>}<\/code><\/p>\n<p><code>\/*Match font size in multicolumn lists*\/\u00a0<\/code><br \/>\n<code>.twocolumn, .threecolumn{\u00a0<\/code><br \/>\n<code>\u00a0 font-size: inherit;\u00a0}\u00a0<\/code><\/p>\n<h2>Optional<\/h2>\n<p><code>\/*Fixes an issues with right\/left aligned images that are oversized and overlapping with content*\/<\/code><\/p>\n<p class=\"x_x_x_xxmsonormal\"><code>.wp-caption.alignright, .wp-caption.alignleft {<\/code><\/p>\n<p class=\"x_x_x_xxmsonormal\"><code>\u00a0 width: 25% !important;<\/code><\/p>\n<p class=\"x_x_x_xxmsonormal\"><code>}<\/code><\/p>\n<p class=\"x_x_x_xxmsonormal\">OR<\/p>\n<p class=\"x_x_x_xxmsonormal\"><code>.wp-caption.alignright, .wp-caption.alignleft {<\/code><\/p>\n<p class=\"x_x_x_xxmsonormal\"><code>\u00a0 width: 194px !important;<\/code><\/p>\n<p class=\"x_x_x_xxmsonormal\"><code>}<\/code><\/p>\n<h1 id=\"other\">Other Solutions<\/h1>\n<p>The following are CSS solutions developed for specific books that may be useful in the future but are generally not applicable to most books.<\/p>\n<p><code><span style=\"color: #0000ff;\">\/*Increases width of sidebar textboxes*\/<\/span><\/code><br \/>\n<code>.textbox--sidebar {<\/code><br \/>\n<code>margin: 1em 0 1em 1em;<\/code><br \/>\n<code>max-width: 50%; }<\/code><\/p>\n<p><span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Reduce padding around special textbox headings*\/<\/span><\/code><\/span><code><\/code><br \/>\n<code>.textbox.textbox--learning-objectives .textbox__header, .bcc-box.textbox--learning-objectives .textbox__header {<\/code><br \/>\n<code>padding: 0.3em 1em 0.1em 1em;<\/code><br \/>\n<code>}<\/code><br \/>\n<code>.textbox.textbox--exercises .textbox__header, .bcc-box.textbox--exercises .textbox__header {<\/code><br \/>\n<code>padding: 0.3em 1em 0.1em 1em;<\/code><br \/>\n<code>}<\/code><br \/>\n<code>.textbox.textbox--examples .textbox__header, .bcc-box.textbox--examples .textbox__header {<\/code><br \/>\n<code>padding: 0.3em 1em 0.1em 1em;<\/code><br \/>\n<code>}<\/code><br \/>\n<code>.textbox.textbox--key-takeaways .textbox__header, .bcc-box.textbox--key-takeaways .textbox__header {<\/code><br \/>\n<code>padding: 0.3em 1em 0.1em 1em;<\/code><br \/>\n<code>}<\/code><\/p>\n<p><span style=\"color: #0000ff;\"><code><span style=\"color: #0000ff;\">\/*Increase space between list items*\/<\/span><\/code><\/span><br \/>\n<code>ol.space li {<\/code><br \/>\n<code>margin-bottom: 30px;<\/code><br \/>\n<code>}<\/code><\/p>\n<p><code><span style=\"color: #0000ff;\">\/*Style for blank spaces - all text with this class will be white with a black underline.*\/<\/span><br \/>\n.blankspace {<br \/>\ncolor: #fff;<br \/>\ntext-decoration: underline;<br \/>\ntext-decoration-color: black;<br \/>\n}<\/code><code><\/code><code><\/code><\/p>\n","protected":false},"author":90,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-24","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/opentextbc.ca\/publishingstyleguide\/wp-json\/pressbooks\/v2\/chapters\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/opentextbc.ca\/publishingstyleguide\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/opentextbc.ca\/publishingstyleguide\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/opentextbc.ca\/publishingstyleguide\/wp-json\/wp\/v2\/users\/90"}],"version-history":[{"count":25,"href":"https:\/\/opentextbc.ca\/publishingstyleguide\/wp-json\/pressbooks\/v2\/chapters\/24\/revisions"}],"predecessor-version":[{"id":508,"href":"https:\/\/opentextbc.ca\/publishingstyleguide\/wp-json\/pressbooks\/v2\/chapters\/24\/revisions\/508"}],"part":[{"href":"https:\/\/opentextbc.ca\/publishingstyleguide\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/opentextbc.ca\/publishingstyleguide\/wp-json\/pressbooks\/v2\/chapters\/24\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/opentextbc.ca\/publishingstyleguide\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/opentextbc.ca\/publishingstyleguide\/wp-json\/pressbooks\/v2\/chapter-type?post=24"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/opentextbc.ca\/publishingstyleguide\/wp-json\/wp\/v2\/contributor?post=24"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/opentextbc.ca\/publishingstyleguide\/wp-json\/wp\/v2\/license?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}