{"id":35,"date":"2018-05-15T15:18:51","date_gmt":"2018-05-15T15:18:51","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/ebooks\/?post_type=chapter&p=35"},"modified":"2021-07-19T18:00:40","modified_gmt":"2021-07-19T18:00:40","slug":"chapter-3-editing-epubs","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/chapter\/chapter-3-editing-epubs\/","title":{"raw":"Chapter 3 \u2022 Editing ePubs","rendered":"Chapter 3 \u2022 Editing ePubs"},"content":{"raw":"Editing ePubs enables authors and publishers familiar with HTML and CSS to make changes and create special effects outside of the originating program.\r\n

Opening an ePub<\/h2>\r\nThe .epub file type is a compressed archive containing the pages in XHTML, style specifications in CSS, and accompanying images, fonts, audio, video, JavaScript, and other files (if any). Opening and editing an .epub file generally requires a third-party app that can read XHTML, such as Sigil (Figure 3.1) or Oxygen XML Editor. Opening the ePub gives access to the XHTML and styles.\r\n\r\nXHTML is similar to HTML. The X for \u201cextensible\u201d means that users can write their own tags, provided that they explain them. M stands for markup, meaning the text and objects are indicated or pointed to with tags, which are enclosed in less-than and greater-than signs. An example of a tag is <p> for paragraph. A paragraph needs an opening <p> at the beginning and a closing <\/p> tag at the end. Some tags are self-closing, including <img\/> for image, <br\/> for break (carriage return), and <hr\/> for horizontal rule (line). With these tags the closing \u201c\/\u201d is included at the end of the tag.\r\n\r\n\"Screenshot\r\n

HTML and CSS for ePub<\/h2>\r\nSome of the most common tags used in ePubs are the paragraph, heading, and image tags (Table 3.1).\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Table 3.1. HTML Tags for ePub<\/strong><\/caption>\r\n
<p><\/strong><\/td>\r\nparagraph<\/td>\r\n<\/tr>\r\n
<h1>\u2026<h6><\/strong><\/td>\r\nheading 1 (largest) to heading 6 (smallest)<\/td>\r\n<\/tr>\r\n
<span><\/strong><\/td>\r\nspan, region of text to be selected and styled<\/td>\r\n<\/tr>\r\n
<img\/><\/strong><\/td>\r\nimage, e.g., <img src=\"imagename.jpg\" \/><\/td>\r\n<\/tr>\r\n
<figure><\/strong><\/td>\r\nUnites an <img> tag and its caption (<figcaption>)<\/td>\r\n<\/tr>\r\n
<figcaption><\/strong><\/td>\r\ncaption for an <img> tag<\/td>\r\n<\/tr>\r\n
<br\/><\/strong><\/td>\r\nbreak, or carriage return (self-closing), can be replaced with styles \"padding\" or \"margin\"<\/td>\r\n<\/tr>\r\n
<hr\/><\/strong><\/td>\r\nhorizontal rule, or line; there are no vertical rules, but they can be made with a border-left or border-right style on an object.<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nTo style a given tag with CSS, the tag must first be selected. This can be done by siting the tag itself, such as \u201cp\u201d for paragraph. However the specified style will be applied to all paragraphs. To select one specific paragraph, it\u2019s helpful to identify that paragraph with an ID (e.g., <p id=\"first-para\">). The ID should be an alphanumeric name with no spaces. An ID can only be applied to one tag on a page. To select multiple tags, use a class. The format is similar: <img class=\"body-fig\">. To cite an ID in CSS, use the # symbol. A period (.) indicates a class.\r\n\r\n\r\n\r\n\r\n\r\n
Table 3.2. HTML Identifiers for CSS Styling<\/strong><\/caption>\r\n
Identifier<\/strong><\/td>\r\nExample in HTML<\/strong><\/td>\r\nSelector in CSS<\/strong><\/td>\r\n<\/tr>\r\n
tag, e.g., <p><\/strong><\/td>\r\n<p><\/td>\r\np<\/td>\r\n<\/tr>\r\n
ID<\/strong><\/td>\r\n<p id=\"first-para\"><\/td>\r\n#first-para<\/td>\r\n<\/tr>\r\n
class<\/strong><\/td>\r\n<img class=\"body-fig\"><\/td>\r\n.body-fig<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nTable 3.3 shows some styles that can be applied to text.\r\n\r\n\r\n\r\n
Table 3.3. Styles for Text and Images<\/strong><\/caption>\r\n
text<\/strong><\/td>\r\nimage<\/strong><\/td>\r\n<\/tr>\r\n
font-family:\r\nfont-size:\r\nfont-style:\r\nfont-weight:\r\nline-height:\r\ncolor:<\/td>\r\nwidth:\r\nheight:\r\nfloat:\r\nmargin:<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Creative Effects with ePubs<\/h2>\r\nSome special effects that enhance ePubs include drop-caps, drop shadows on text and images, and borders on images.\r\n\r\nDecorative fonts.<\/strong> Royalty-free fonts available from Google Fonts and other sources can be used in web-based and ePub eBooks. Fonts can either be linked to their internet sources as style sheets or included on the web server or in the eBook. Technically an ePub should be readable without being connected to the internet, therefore it\u2019s best to download the font and include it in the ePub. When editing an ePub in Sigil, include the font file in the Fonts folder and specify it in the style sheet (Figure 3.2<\/strong><\/span>).\r\n\r\n[caption id=\"attachment_407\" align=\"aligncenter\" width=\"1024\"]\"\"<\/a> Figure 3-2.<\/strong> Decorative font placed in the Fonts folder and specified for the h1 tag in an ePub.[\/caption]\r\n\r\nDrop-caps.<\/strong> Drop-caps can be created by making the first letter of the first paragraph larger than the surrounding text. In the example (Figure 3.3<\/strong><\/span>), the first letter in the paragraph, \u201cC,\u201d is selected using the ::first-letter selector, which is built in to the latest version of HTML. The letter \u201cC\u201d has the surrounding text wrapped around it using the \u201cfloat\u201d left style. the letter \u201cC\u201d is set to 4.4 times the size of the other text using the \u201cem\u201d measurement. (One em is the size of the text in points, so for 14-pt. text like that shown, one em would be a square 14 pt. on each side.) The \u201cC\u201d is set to wrap the surrounding letters using the \u201cfloat: left\u201d style. Margins are set for the top, right, bottom, and left positions to move the text further away to the right of the \u201cC\u201d and bring it closer to the bottom. The letter has a drop-shadow created with the text-shadow style, which has four specifications\u2014right offset, vertical offset, blend distance, and colour.\r\n\r\n[caption id=\"attachment_46\" align=\"aligncenter\" width=\"900\"]\"\" Figure 3.3.<\/strong> Selectors and styles for creating borders and drop shadows around images and drop caps for text.[\/caption]\r\n\r\nImages.<\/strong> Images, like the one shown in Figure 3.3<\/strong><\/span>, can have borders applied using the \u201cborder\u201d style, with specifications for width, line type, and colour. A drop-shadow can also be applied using the \u201cbox-shadow\u201d style, which is similar to text-shadow described above. (Not all platforms, eReader apps, and eReaders may support the drop-shadow style.)\r\n\r\nSmall caps.<\/strong> These are smaller uppercase letters at the beginning of a chapter or section (Figure 3.4<\/strong><\/span>), often following a drop-cap. Small caps can be created by selecting the desired region of text with opening and closing <span> tags, then setting the \u201cfont-variant: small-caps\u201d style.\r\n\r\n[caption id=\"attachment_52\" align=\"aligncenter\" width=\"512\"]\"\" Figure 3.4.<\/strong> Example of small caps set with the \u201cfont-variant\u201d style.[\/caption]\r\n\r\nSidebars.<\/strong> Sidebars are boxes with ancillary information relating to the current chapter or section (Figure 3.5<\/strong><\/span>). Sidebars can be created by inserting one styled <p> tag, or if more than one paragraph, a <div> or division tag. The sidebar can then be styled with the \u201cborder\u201d and \u201cbackground\u201d styles.\r\n\r\n[caption id=\"attachment_50\" align=\"aligncenter\" width=\"768\"]\"\" Figure 3.5.<\/strong> Example of a sidebar with coloured background and border with rounded corners (border-radius).[\/caption]\r\n\r\nPull quotes.<\/strong> These are one or more sentences or phrases taken from the text that are set in much larger type in order to add interest to the text (Figure 3.6<\/strong><\/span>). A pull quote can be created by especially styling a <p> paragraph tag, or using a <div> division. The text can be set to a larger font and with quote marks if appropriate.\r\n\r\n[caption id=\"attachment_49\" align=\"aligncenter\" width=\"768\"]\"\" Figure 3.065.<\/strong> Example of a pull-quote.[\/caption]","rendered":"

Editing ePubs enables authors and publishers familiar with HTML and CSS to make changes and create special effects outside of the originating program.<\/p>\n

Opening an ePub<\/h2>\n

The .epub file type is a compressed archive containing the pages in XHTML, style specifications in CSS, and accompanying images, fonts, audio, video, JavaScript, and other files (if any). Opening and editing an .epub file generally requires a third-party app that can read XHTML, such as Sigil (Figure 3.1) or Oxygen XML Editor. Opening the ePub gives access to the XHTML and styles.<\/p>\n

XHTML is similar to HTML. The X for \u201cextensible\u201d means that users can write their own tags, provided that they explain them. M stands for markup, meaning the text and objects are indicated or pointed to with tags, which are enclosed in less-than and greater-than signs. An example of a tag is <p> for paragraph. A paragraph needs an opening <p> at the beginning and a closing <\/p> tag at the end. Some tags are self-closing, including <img\/> for image, <br\/> for break (carriage return), and <hr\/> for horizontal rule (line). With these tags the closing \u201c\/\u201d is included at the end of the tag.<\/p>\n

\"Screenshot<\/p>\n

HTML and CSS for ePub<\/h2>\n

Some of the most common tags used in ePubs are the paragraph, heading, and image tags (Table 3.1).<\/p>\n\n\n\n\n\n\n\n\n\n\n
Table 3.1. HTML Tags for ePub<\/strong><\/caption>\n
<p><\/strong><\/td>\nparagraph<\/td>\n<\/tr>\n
<h1>\u2026<h6><\/strong><\/td>\nheading 1 (largest) to heading 6 (smallest)<\/td>\n<\/tr>\n
<span><\/strong><\/td>\nspan, region of text to be selected and styled<\/td>\n<\/tr>\n
<img\/><\/strong><\/td>\nimage, e.g., <img src=”imagename.jpg” \/><\/td>\n<\/tr>\n
<figure><\/strong><\/td>\nUnites an <img> tag and its caption (<figcaption>)<\/td>\n<\/tr>\n
<figcaption><\/strong><\/td>\ncaption for an <img> tag<\/td>\n<\/tr>\n
<br\/><\/strong><\/td>\nbreak, or carriage return (self-closing), can be replaced with styles “padding” or “margin”<\/td>\n<\/tr>\n
<hr\/><\/strong><\/td>\nhorizontal rule, or line; there are no vertical rules, but they can be made with a border-left or border-right style on an object.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

To style a given tag with CSS, the tag must first be selected. This can be done by siting the tag itself, such as \u201cp\u201d for paragraph. However the specified style will be applied to all paragraphs. To select one specific paragraph, it\u2019s helpful to identify that paragraph with an ID (e.g., <p id=”first-para”>). The ID should be an alphanumeric name with no spaces. An ID can only be applied to one tag on a page. To select multiple tags, use a class. The format is similar: <img class=”body-fig”>. To cite an ID in CSS, use the # symbol. A period (.) indicates a class.<\/p>\n\n\n\n\n\n\n
Table 3.2. HTML Identifiers for CSS Styling<\/strong><\/caption>\n
Identifier<\/strong><\/td>\nExample in HTML<\/strong><\/td>\nSelector in CSS<\/strong><\/td>\n<\/tr>\n
tag, e.g., <p><\/strong><\/td>\n<p><\/td>\np<\/td>\n<\/tr>\n
ID<\/strong><\/td>\n<p id=”first-para”><\/td>\n#first-para<\/td>\n<\/tr>\n
class<\/strong><\/td>\n<img class=”body-fig”><\/td>\n.body-fig<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Table 3.3 shows some styles that can be applied to text.<\/p>\n\n\n\n\n
Table 3.3. Styles for Text and Images<\/strong><\/caption>\n
text<\/strong><\/td>\nimage<\/strong><\/td>\n<\/tr>\n
font-family:
\nfont-size:
\nfont-style:
\nfont-weight:
\nline-height:
\ncolor:<\/td>\n		width:
\nheight:
\nfloat:
\nmargin:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Creative Effects with ePubs<\/h2>\n

Some special effects that enhance ePubs include drop-caps, drop shadows on text and images, and borders on images.<\/p>\n

Decorative fonts.<\/strong> Royalty-free fonts available from Google Fonts and other sources can be used in web-based and ePub eBooks. Fonts can either be linked to their internet sources as style sheets or included on the web server or in the eBook. Technically an ePub should be readable without being connected to the internet, therefore it\u2019s best to download the font and include it in the ePub. When editing an ePub in Sigil, include the font file in the Fonts folder and specify it in the style sheet (Figure 3.2<\/strong><\/span>).<\/p>\n

\"\"<\/a>
Figure 3-2.<\/strong> Decorative font placed in the Fonts folder and specified for the h1 tag in an ePub.<\/figcaption><\/figure>\n

Drop-caps.<\/strong> Drop-caps can be created by making the first letter of the first paragraph larger than the surrounding text. In the example (Figure 3.3<\/strong><\/span>), the first letter in the paragraph, \u201cC,\u201d is selected using the ::first-letter selector, which is built in to the latest version of HTML. The letter \u201cC\u201d has the surrounding text wrapped around it using the \u201cfloat\u201d left style. the letter \u201cC\u201d is set to 4.4 times the size of the other text using the \u201cem\u201d measurement. (One em is the size of the text in points, so for 14-pt. text like that shown, one em would be a square 14 pt. on each side.) The \u201cC\u201d is set to wrap the surrounding letters using the \u201cfloat: left\u201d style. Margins are set for the top, right, bottom, and left positions to move the text further away to the right of the \u201cC\u201d and bring it closer to the bottom. The letter has a drop-shadow created with the text-shadow style, which has four specifications\u2014right offset, vertical offset, blend distance, and colour.<\/p>\n

\"\"
Figure 3.3.<\/strong> Selectors and styles for creating borders and drop shadows around images and drop caps for text.<\/figcaption><\/figure>\n

Images.<\/strong> Images, like the one shown in Figure 3.3<\/strong><\/span>, can have borders applied using the \u201cborder\u201d style, with specifications for width, line type, and colour. A drop-shadow can also be applied using the \u201cbox-shadow\u201d style, which is similar to text-shadow described above. (Not all platforms, eReader apps, and eReaders may support the drop-shadow style.)<\/p>\n

Small caps.<\/strong> These are smaller uppercase letters at the beginning of a chapter or section (Figure 3.4<\/strong><\/span>), often following a drop-cap. Small caps can be created by selecting the desired region of text with opening and closing <span> tags, then setting the \u201cfont-variant: small-caps\u201d style.<\/p>\n

\"\"
Figure 3.4.<\/strong> Example of small caps set with the \u201cfont-variant\u201d style.<\/figcaption><\/figure>\n

Sidebars.<\/strong> Sidebars are boxes with ancillary information relating to the current chapter or section (Figure 3.5<\/strong><\/span>). Sidebars can be created by inserting one styled <p> tag, or if more than one paragraph, a <div> or division tag. The sidebar can then be styled with the \u201cborder\u201d and \u201cbackground\u201d styles.<\/p>\n

\"\"
Figure 3.5.<\/strong> Example of a sidebar with coloured background and border with rounded corners (border-radius).<\/figcaption><\/figure>\n

Pull quotes.<\/strong> These are one or more sentences or phrases taken from the text that are set in much larger type in order to add interest to the text (Figure 3.6<\/strong><\/span>). A pull quote can be created by especially styling a <p> paragraph tag, or using a <div> division. The text can be set to a larger font and with quote marks if appropriate.<\/p>\n

\"\"
Figure 3.065.<\/strong> Example of a pull-quote.<\/figcaption><\/figure>\n","protected":false},"author":6,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["richardadams"],"pb_section_license":""},"chapter-type":[],"contributor":[57],"license":[],"class_list":["post-35","chapter","type-chapter","status-publish","hentry","contributor-richardadams"],"part":178,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":24,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/35\/revisions"}],"predecessor-version":[{"id":533,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/35\/revisions\/533"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/parts\/178"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/35\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapter-type?post=35"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/contributor?post=35"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/license?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}