problem with bullet at end of paragraph

[iain robinson]

Hi all

We're attempting to match a print job in ePub. Obviously matching it exactly is not possible but I'm trying to carry as many design features as possible over to the ePub and one of them is at the end of the last paragraph there's a coloured bullet. No matter what I do I can't get the bullet to work in ePub - I can get it to appear, styled with a span, but I can't get it to sit on the line with the 'normal' text and not cause a gap in the paragraph (in ADE). See screenshots attached

The bullet in the attached ADE screenshot is styled as;

span.end-bullet {
color: #C9652F;
position: relative; 
bottom: -0.2em;
font-size: 2em;
line-height: 0.9em;
}

which is a combination of lifting code from here and there. It looks better in Sigil - it's on the line but still causes a gap in the paragraph. There's got to be a better way that works in both...?

[Jellby]

Originally Posted by iain robinson

font-size: 2em;
line-height: 0.9em;

Those together mean that the line height for the bullet is 1.8em in the normal text size, and then you get the gaps. Have you tried "line-height: 0"? (I'd also remove position and bottom).

[iain robinson]

Thanks. Now we're getting somewhere - that change to the CSS means I don't have the paragraph gap any more but the bullet is sitting too high relative to the text (see screenshot attached).

To drop that onto the baseline with the normal text I added

vertical-align:middle;

That makes it look okay in ADE (but maybe a little low). Doesn't look quite right in Sigil (so maybe iBooks too, but can't test it at the moment). is there another/better way to align the bullet?

[Jellby]

I don't think there is a bullet-proof (oops, no pun intended) solution, because the size and position of the bullet is font-dependent. But you could include the bullet either as an image (even an SVG image) or as an embedded font, that way you can control the exact position with respect to the baseline...

[iain robinson]

Okay, thanks. I'll test it on some devices. Did consider using an image for my bullets in unordered lists but didn't want to have to unzip the ePub to add it in and then have to rezip it. Currently we're doing all our tweaking in Sigil and then just resaving it.

[DiapDealer]

Did consider using an image for my bullets in unordered lists but didn't want to have to unzip the ePub to add it in and then have to rezip it. Currently we're doing all our tweaking in Sigil and then just resaving it.

?? You can add an image to an epub directly from Sigil without unzipping and rezipping manually.

[iain robinson]

Wow - I didn't know that. I was sure I'd tried... Thanks! Does it do all "the paperwork" behind the scenes (ie, add the filename(s) anywhere it needs to be mentioned within the ePub so it validates?

[DiapDealer]

Yes, Sigil does whatever is necessary for the image to be a part of the epub package (right click on the "Images" folder and select "Add Existing Items"). You will still need to add the xhtml for the image to actually appear where you want it to in the ebook, though.

[iain robinson]

That's great - it opens up the possibility of using images for bullets. Cheers!