epubjs
Version:
Render ePub documents in the browser, across many devices
55 lines (37 loc) • 5.22 kB
HTML
<html xmlns:epub="http://www.idpf.org/2007/ops" xmlns="http://www.w3.org/1999/xhtml"><head><title>Writing in the Editor</title><link rel="stylesheet" type="text/css" href="epub.css"/></head><body data-type="book"><section data-type="chapter" epub:type="chapter" data-pdf-bookmark="Chapter 5. Writing in the Editor"><div class="chapter" id="idm669472">
<section data-type="sect1" data-pdf-bookmark="Using and Adding Sections"><div class="sect1" id="addingsections">
<h1>Using and Adding Sections</h1>
<p>The concept of <em>sections</em> can be a little tricky to wrap your head around. A section is a block of text that adheres to a specific theme or goes together in some way. The most popular kind of section is a <em>chapter</em>, and if you’re writing a novel, this is probably the only kind of section you’ll need.</p>
<p>However, more complex projects like reference manuals or documentation will likely want to subdivide chapters further into different levels of sections, as a way of organizing the content into more easily digestible chunks. For example, this chapter of documentation (the one you’re reading right now!) is split into multiple level 1 sections, and some of those level 1 sections are split into level 2 sections, and so on. </p>
<p>Atlas depends on nested sections in your project in order to create a hierarchical table of contents, both visible to readers, and for devices like the iPad or Kindle to use in their internal navigation systems. This means that if you want those features to work correctly when you build your project, you’ll need to use nested sections to structure your content.</p>
<div data-type="note" epub:type="note">
<h1>Note for AsciiDoc and Markdown Users</h1>
<p>If you’re writing in AsciiDoc or Markdown, then Atlas will take care of adding correctly nested sections based on your headings when you build, with no extra steps needed from you. Proceed normally!</p>
</div>
<p>Sections in Atlas can go up to 5 levels deep: Chapter > Section 1 > Section 2 > Section 3 > Section 4. </p>
<p>Sections in the visual editor are clearly delineated by dotted borders--the more borders, the deeper the section is nested. For example, if there are three border lines around a paragraph, then that paragraph is within a section that is three levels deep--most likely a <code>Section 2</code> within a <code>Section 1</code> within a <code>Chapter</code> .</p>
<p>The special markup is all happening behind the scenes in the code editor; all you really need to know is that you should use nested sections for your content (as opposed to free-standing headings). </p>
<p>The steps for adding a new section vary depending on what kind of textual element you’re currently editing. Generally, you’ll follow one of these two paths:</p>
<ol>
<li>Insert a new paragraph by pressing Enter on your keyboard.</li>
<li>With your cursor in that new, empty paragraph, go to the Insert... menu, and choose Section. </li>
</ol>
<p>Atlas will automatically insert a section at the correct nesting level; for example, if you’re inside a Section 1, Atlas will insert a Section 2; if you’re inside a Section 2, Atlas will insert a Section 3, and so on.</p>
<p>The steps above work great when you’re just working with plain text paragraphs, but sometimes you’ll need to add sections after more complex blocks like notes, sidebars, code blocks, and so on. If you just press Enter, you’ll get a new paragraph <em>inside</em> that block element. To insert a new paragraph <em>after</em> the block, do the following:</p>
<ol>
<li>Hover your cursor over the block until you see the ¶ at the bottom right of the block. </li>
<li>Click the ¶ to insert a new paragraph after the block.</li>
<li>With your cursor in that new, empty paragraph, go to the Insert... menu, and choose Section.</li>
</ol>
<div data-type="warning" epub:type="warning">
<h1>Warning</h1>
<p>If a block element is located at the end of a section, the editor may not allow you to click the + sign to add a new paragraph after that block. To get around this, you’ll need to dive into the HTML behind the scenes:</p>
<ol>
<li>Open the Code Editor and navigate to the block element you wanted to add a paragraph after.</li>
<li>Find the closing tag for that block element (it’ll usually be something like this: <code></div></code> , <code></aside></code> , <code></pre></code> , <code></ul></code> , or <code></ol></code> . (The / means it’s a closing tag, as opposed to an opening tag, which would not have a slash.)</li>
<li>Press Enter immediately after that closing tag, and insert the following: <code><p>Some text.</p></code></li>
<li>Save and switch back to the Visual Editor. You should now see a new paragraph containing the text “Some text." after the original block element. You can delete the text and insert a section in that paragraph, or you can press the Enter key either at the beginning or end of that paragraph to insert another new, blank paragraph and add a section there (as described above).</li>
</ol>
</div>
</div></section></body></html>