Sidebar Formatting

Scrivener Newcomer Central
, ,
9

Live example

Here is a functional example of the ideas above:

margin_note_example.zip (183.0 KB)

  1. In the main editor, note the pink box in the sample text. This marks a margin note using the “Margin Note” paragraph style. We’ll get to why some of the text is underscored in a moment.

  2. In File ▸ Compile..., double-click the “Ebook (with Notes)” Format to examine it.

  3. In the Styles pane, locate the Margin Note style and have a look at its settings. All of these are fairly important. You need raw markup enabled so that Scrivener does not escape the raw markup we are inserting with the prefix and suffix fields.

    Thus, be aware that the contents of the pink highlighted boxes in the editor should be treated as HTML without their surrounding <p> element markers, since the style is adding them for us. You will not be able to use formatting, but must add it as HTML. Now the underscored areas in the example probably make more sense. As you will see when this is compiled, only the <em>...</em> text that was typed in will come out italic in the .epub.

    While here, scroll through the style list and make note of “Raw HTML Block”. This is a handy prefab style we provide, along with the “Raw HTML” character span style. Simply add these to your project and use them to insert HTML wherever you want. I went with the special Margin Note style here though because otherwise we’d have to type in the containing HTML every time.

  4. Lastly, select the CSS compile format pane and scroll to the bottom of the “Custom Stylesheet” column, to see where I’ve pasted AntoniDol’s example.

  5. Give that a test compile, and you’ll get a margin note in the first chapter!

A bit of setup, but easy peasy to work with in the writing area, and once you know these tricks you can do other fancy things as well.

Alternatives & Disclaimers

  • Now if the thought of writing in HTML now and then puts one off, there are other ways of doing this. For example that aforementioned “Raw HTML Block” style could be used on a line above the margin note area, where one types in <aside>, and then the closing marker at the end using the same method. Now Scrivener is generating the paragraphs and all formatting within them. Using a similar idea to the first, one could create a “Start Margin Note” and “End Margin Note” style that exists purely to insert <aside> and </aside> respectively. I think you would want one space in such a paragraph to avoid the style being auto-cleaned on an empty paragraph. Maybe fine for a single-use case like this, but it could get out of hand if you intend to have a number of them.
  • I haven’t personally broadly tested book reader support for the <aside> element. If this more semantically appropriate modern element is not supported in your ebook reader of choice, fall back to using <div class="margin-note"> and adjust the CSS accordingly.

P.S. @sharonmurdock I’ve granted you upload permissions.