Epub3 Best Practice for ornamental image at top of each section

Draft2Digital offers a template option that includes a corner decoration at the top of each section.

.

Their templates don’t work for me because they are formatting the first lines in a way I don’t want.

I want to create a section layout in Scrivener that I can reuse and I don’t want to have to manually insert images in each poem file.

I saw another post in this forum that suggested that creating a style “treat as raw HTML” might be a way to go., so I tired that with a set of divs to set the positioning, but it’s not coming out as expected.

The image is in the file as expected, but it’s positioning is way off. I put the image placeholder in the section prefix with the raw html style I created which was a set of divs for positioning, but it didn’t work.

My raw HTML DIVs are this:

![raw-html-style.png|673x216](upload://x0w3PklBTnwvdXvp48iYsttALox.png)

I place the image placeholder in the prefix and applied the style to it.

What am I doing wrong?

Thanks!

Do you have a way of opening an ePub file created in this other program, in an editor like Calibre’s so you can see precisely what technique they are using and copy it?

In the following checklists we will use a procedure that will give you a clearer picture of what is really going on—viewing the results in a reader-oriented program and trying to deduce how to fix it from that is just about the most difficult way to solve problems. Being able to work with the HTML and CSS directly makes solving problems cake, and then you can bring those solutions back into Scrivener. You can use an ePub editor like Calibre for that part—but I like to work directly with HTML files (that’ll be the method the checklist uses).

Speaking on preview software, one thing I notice is that you appear to be using two different programs (from the screenshots) to view the technique. It could be the one in the lower shot doesn’t allow the layout techniques (or just bungles them) in a way the program in the first screenshot uses fine.

[size=120]Setting Up a Working Environment for Testing[/size]

This will also provide some suggestions for methods on the Scrivener side of things. The first thing I do is get a look at the landscape Scrivener provides for me to work within, and then work from that with our CSS, and add only what HTML I really need to:

  1. To experiment, right-click on the stock “Ebook” compile format and duplicate & edit it.
  2. In the Section Layouts pane, I will use the “Chapter Heading” layout as a starting point, as it is very simple and already does most of the things we want. To modify it:

[list=1][*] In “Title Options” I change the prefix to “Sonnet <$n:sonnet>” (no carriage return on the end, we just want a one-line simple title), and set the Case to “Normal” for all.

  1. In the “New Pages” pane I remove the blank line prefix. I don’t want a bunch of empty paragraph elements cluttering things up, we’ll implement any spacing we need much more cleanly with CSS.
  2. Finally I’ll rename the Section Layout to something more appropriate: “Sonnet Heading”, and for the case of aesthetics, in the “Settings” tab, change the CSS class name to “sonnet-title”.
    [/:m]
    [
    ] In the Style pane, I modify the “Title” style to use HTML heading 1 instead of 2.[size=80][1][/size][/*:m][/list:o]

Now at this point, in order to see what we’re working with, it would be a good idea to generate some output HTML. Hold down the Option key and click the Test HTML… button in the lower left of the window—save that somewhere handy. Using an HTML or coding editor, open one of the “body#.xhtml” files that contains a sonnet heading. Here is the HTML structure that Scrivener builds for the heading we designed:

[code]

Sonnet 1

[/code]

Very simple and to the point, and something worth noting is that we may implement the ornamental look with nothing more than this.

[size=120]Using the Section Layout DIV[/size]

We could set the height of the sonnet-title div to that of the image, place it as a non-repeating background element and align the text along the bottom. Here is an example of how that could be done:

.sonnet-title h1 { /* Reduce from overall height of box to overlap title with image. */ padding-top: 83px; } .sonnet-title { /* The height of image as displayed. */ height: 100px; background-repeat: no-repeat; background-position-x: right; /* I'm reducing the width by 50% of the original to increase fidelity. */ background-size: 38.5px; background-image: url(data:image/gif;base64,<PASTE>); }

Where the phrase is placed in the example on the penultimate line, replace that with a Base64 encoded copy of your image. If you don’t know how to get that, here’s an easy way:[size=80][2][/size]

  1. Open Terminal.app from /Applications/Utilities
  2. Type in “base64” on the command-line (followed by a space) and then drag and drop the file of your ornamental graphic into the window. Complete the command by typing in “| pbcopy” (if the font makes that difficult to read, the first character is a pipe symbol, above the backslash on my keyboard layout) and pressing return.
  3. That will encode the graphic to ASCII text safe characters and place that string of characters onto your clipboard.
  4. So now you can go back into the CSS pane in Scrivener and paste the image in over the placeholder.

Naturally, you’ll probably want that toward the bottom of the CSS pane. :slight_smile:

Give that a test in a few different readers. I think it looks good in iBooks, Adobe Digital Editions, and converted to Mobi, with Reader for macOS, and a few others.

[size=120]Using an Image[/size]

We could of course still use the method you are taking, of inserting a graphic in the “Prefix” tab of the Layout and giving it a style. For some things that may be a better option, so let’s take a look at it. We will do the same basic exploratory step of setting it up and then seeing what we get in HTML, before deciding whether we need more HTML added by hand:[size=80][3][/size]

  1. Duplicate & edit our previous example and delete the CSS we added at the end of the Custom CSS column.
  2. In the Styles pane, add a simple paragraph style called “Ornament”. Make sure the font options are disabled, the alignment is left and the text colour is black. We don’t want any inline CSS insertion from these things.
  3. Back in “Sonnet Heading” in the Section Layouts pane:

[list=1][*] Add the “<$img:ornament>” (or whatever your filename is called).

  1. Add a carriage return after the line so that it doesn’t run into the title.
  2. Select the first line and give it the “Ornament” style.
    [/:m]
    [
    ] In the “Settings” tab, remove the CSS class name. We won’t be needing the div around the section heading.[/:m]
    [
    ] Now let’s generate some test HTML and examine the output.[/*:m][/list:o]

[code]

Sonnet 1

[/code]

Great! This is very clean as well. What’s good to note here is that we don’t need to insert any HTML like you were trying to do. We already have a classed element containing the image. Thus, something like this might do well for CSS:

.ornament { float: right; } .ornament img { /* Adjust overlap amount of title over image. */ margin-bottom: -10px; } .ornament + h1 { clear: right; }

Again, give this a round of testing. To me it looks about as stable as the prior method—but as I mentioned before, it might be a good idea to see what the original template is doing. Presumably they’ve put more testing and effort into making sure it is a stable design, than my Sunday afternoon 10-minute CSS hacks. :slight_smile:

Here is sample project I worked with for testing. It contains two compile formats, each using one of the above techniques.

[size=120]Notes[/size]

[size=80][1] Not sure why that is set that way to be honest—the top level heading of a document should be h1, not h2, we might need to fix that.[/size]
[size=80][2] I would imagine there are 1,001 tools for doing this online, maybe even generating the CSS as well from an image, as not all Web developers are UNIX command-line junkies like myself. :wink:[/size]
[size=80][3] I’m getting some weird, bug-like behaviour when attempting to use styles to generate raw markup in the Prefix area. I suspect the whole thing is messed up at the moment, and that is part of why examining the raw HTML output is always a good idea. Chances are your output look nothing like you suspect, and your custom div code may not even be intact. So the following checklist will use a method that seems to dodge all of that—it is important to follow each step precisely, otherwise things may break; the interplay between styles, prefixes and images in general seems very fragile.[/size]

Hi,

Thanks for the very thorough reply. In your message you said that you like to work in HTML. Do you mean that you change the output format to one of the HTML options in Scrivener to do your setup ( instead of epub or mobi)?

I’m not sure where I’m supposed to be clicking on the a Test button with option key held down. The only test button I’ve seen is in the section layout editor, but that did nothing for me except to export in the epub format I am working on.

To answer your question, I actually did deconstruct the draft2digital layout and the image was placed using a table with the image in the far right corner. I didn’t want to go down that road with Scrivener, so I eventually found a different solution.

The black screenshot from earlier is a screenshot from ibooks with the background set as black. You can see that the image is not aligning all the way to the right. That’s what was driving me nuts!

Ready to throw in the towel, I decided to place a full width decorative image in there, which worked really well. After thinking about this for a bit, I realized that it worked better because it was full width, so it didn’t need to be positioned with CSS.

So, I edited my corner image to make it 640px wide (by extending it’s canvas size in Photoshop, leaving the corner int he far right corner of the image). Now it looks like this, when before it was closer to a square shape (black border is from Photoshop, it’s not part of the image):

Screen Shot 2018-02-19 at 12.43.33 PM.png

I placed that image in the section prefix area with the <$img:imagename> placeholder.
I put the poem title in the title prefix box, then in the formatting, applied a character paragraph style I had previously created to make the font larger and centered, which I called corner-title.

I still had a problem of the title text sitting too far down the page from the corner because of the image height.

Note that all this time I have been working in in epub3 format (except when I deconstructed the draft2digital version from earlier, which as epub2). Epub3 has a CSS tab in the section formatting pane that is not available in epub2. I added this CSS to the corner-title style I had previously created:

/*set title to top of page when a corner image is in use */
.corner-title {margin-top:-40%;}

The negative margin pushes the title up into the transparent background of the image, so that it is closer to the corner image. With the percentage placement, it stays pretty well positioned regardless of screen and/or font sizes.

I didn’t realize until just now that there is no CSS panel for epub2, which probably makes my solution a no-go since most online retailers don’t support epub3. In fact, when I tested my epub3 output iin draft2digital, I got some cute message along the lines of “great job making this awesome format most retailer’s don’t support yet. Go make an epub2 instead.”

At that point I did throw in the towel and came up with solution that uses 2 fullwidth graphics (screenshot from ibooks):

I’d still like to know how you’re working in HTML mode. I’d love to get in there and tweak.

Thanks!
Melinda

I think you have the right idea of where the Test… button is, but I must admit I was assuming you were only using ePub3 from your prior message, and it’s worth noting only ePub3 and KF8 have this Test HTML… optional feature. All of my above examples are based on ePub3 HTML output. The ePub2 generator is not nearly so clean—in fact that’s why we don’t have the button; there is far less utility in examining the HTML directly during the design process, since it is going to change from one compile to the next.

It is worth noting you can still work with the HTML inside the ePub file using a program like Calibre’s editor—I’d say that would be more of a final phase activity though rather than a CSS design tool.

Hmm, the problem with that idea though is, what is full-width? Is that going to work as well on an iPhone 4, as it does on an iPad Pro, or will it be stretched on one and tiny on the other?

Yeah same here, my approaches all require detailed CSS control. That’s an unfortunate twilight problem right now. The new system offers much more control, control that it doesn’t make sense to provide to the ePub 2 generator (where class names are generated numerically in word processor style, like p23 = block quote in this chapter, but is p18 in that chapter).

So we’re kind of building for the future with that capability—and it does have present-tense applications for some platforms. Those distributing primarily through iTunes for example, can be rest assured that ePub3 will be best.

We do have an ePub2 route that is very clean, and has full CSS access from the compile side, but one needs to use Pandoc Markdown while writing to fully take advantage of that.

A design that doesn’t involve overlapping elements is probably best. I think that looks nice too! A design like that will work better under the aforementioned constraints. It will shrink down smaller for the iPhone, and maybe not go full width on an iPad Pro—but the important thing is that it look nice on either.

My “full width” graphic is 640px. It’s a simple line drawing, so it sizes up pretty well.

Can you share a screenshot or video clip of the “test html” step?

Thanks!

It’s the very same button that you were talking about earlier: