The main issue you will probably run into is compatiblity. Considering that ePub files are basically self-contained websites, and we know what websites can do (look around this thread, at how elements are in the margins, aligned to the right of each comment, etc.), it might seem like the sky is the limit—but everything a website can do isn’t supported by all of the mainstream ebook readers.
Putting a note in the margin is trivial with HTML+CSS, you just need a span around some marker text at the front of the paragraph (which Scrivener can do for you with styles), and then some CSS to position the span ‘absolute’ and pinned to the right of the display. Then you would offset the right margin of everything else, giving space for this area, and the rest would be finesse—padding and alignment tweaks to make it look nice.
But Kindle doesn’t like absolute positioning, which gives you the ability to say this thing here should be 237px down from the top and 18px from the left, no matter what, even if it is on top of other things. So while that approach would work fine for Kobo, Sony and other Adobe Digital Editions-based ebook readers, it wouldn’t work for a big chunk of readers.
The second-best method is to use a float, which is in principle the same tool we would use to make a drop cap, on the left side of the paragraph. Floats become objects that pushing other objects around, make space for them and wrap around them. So, if we make a margin on the right, then that effect of being inside the paragraph and having the text wrap around it does not happen, and the right-float marker sits aligned to the paragraph’s top, on its right.
If I was to go down that path what element would you recommend? Straight text, an Inline Annotation or something else?
So for this part, as I mentioned briefly above, styles are what you want to use, 100%. They give you this flexibility:
- Nuke the marked text (for formats where this isn’t wanted or cannot be conveyed properly).
- Put custom syntax around it, like the HTML we would need to do something special with it in CSS:
<span class="refmark">378</span>. You type in “378”, mark it with the style, and then set up your compiler Format setting to insert the static raw syntax around it—making sure to tick the checkbox to treat this as raw markup, in the Styles pane. - Handle it correctly in post, with proper desktop publishing software. While you might not get it to look right in Scrivener’s PDF, styles make it so templates you prepare can format things correctly once the compiled output is imported into them.
There is more that styles can do, but those are probably the key points for what you’re looking to do.
If you need some primers on how to do this in Scrivener, here are some threads on how to go beyond what the checkboxes and switches in the compiler GUI can do—some of these topics are in fact very close to what you want:
- How to add a page break, even in an epub - #14 by AmberV
- Sidebar Formatting - #9 by AmberV
- Aligning figures in ePUB - #2 by AmberV
- How to get tab stops into epub - #16 by AmberV
- Formatting end notes at the compiling stage - #6 by AmberV
If you are still learning CSS and aren’t sure how to pull off the float:right look, I can help you work something up, but you might be able to cobble something together from the examples already given in those threads. The first link, by the way, goes to a primer on how and where to paste CSS you find on the web into your book’s compile settings.