Misalignment of object when exporting to reflowable ePub

Community Beginner ,
Jan 11, 2021 Jan 11, 2021

Copy link to clipboard

Copied

Hello

I'm very new to ePub design and am getting a little stuck with placing a stroke under an indented paragraph.

The paragraph is indented to 30px (as it's an extract) and so want the stroke to be indented to the same.

I created the stroke, and under Object Export Options have selected 'Rasterise Container'. 

The stroke is custom anchored to it's own para style which is indented to 30px.

At different viewing ports/scales in ibooks, sometimes the stroke is indented correctly (inline with the extract indent) but sometimes not far enough or too far.

Looking for a bit of advice, i'm sure it very easy if you know how 🙂

I've included some screen shots incase it helps.

Incase it helps.

Using Indesign CC 2020. Previewing in iBooks. 

Thanks so much in advance.

Emily

 

TOPICS
EPUB

Views

122

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Jan 11, 2021 Jan 11, 2021
It sounds like your approach is making it difficult to replicate in the EPUB. Keep in mind that EPUB is just using HTML and CSS to replicate the formatting. If you're simply trying to add a stroke under a paragraph, I'd use the Border option to apply a bottom stroke to the paragraph. If you're using an older version of InDesign, you can do this with a rule below. I think you'll find that this will give you much better results. Save the appearance as a style so you can use it as needed and tweak ...

Likes

translate

Translate

Translate
Adobe Community Professional ,
Jan 11, 2021 Jan 11, 2021

Copy link to clipboard

Copied

I think with Reflowable ePubs the simpler the design the better.

By the way, don't rely just on iBooks to preview, test your ePub in other viewers and devices as well.

 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 11, 2021 Jan 11, 2021

Copy link to clipboard

Copied

It sounds like your approach is making it difficult to replicate in the EPUB. Keep in mind that EPUB is just using HTML and CSS to replicate the formatting. If you're simply trying to add a stroke under a paragraph, I'd use the Border option to apply a bottom stroke to the paragraph. If you're using an older version of InDesign, you can do this with a rule below. I think you'll find that this will give you much better results. Save the appearance as a style so you can use it as needed and tweak the HTML/CSS output as well.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 11, 2021 Jan 11, 2021

Copy link to clipboard

Copied

Thanks Chad. Thanks Derek. I'm not at the level where I can tweak CSS, yet.

The border did work but even with defining inset amounts the bottom border still extended all the way accross the text panel to the right. The left indent was actually spot on!

 

I guess I'll just keep it simple and remove them 🙂

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 11, 2021 Jan 11, 2021

Copy link to clipboard

Copied

I seem to now have another problem. I have a rogue stroke that isn't appearing in the ID layout (in styles or as a style override) but is appearing before one of my chapter titles.

 

Do you have anyideas what might be happening here? I've been fiddling for an hour and dont seem to be able to find a work around. Tried removing the page, and adding a fresh one, and tried using the text from a different chapter to delete and type back in. Hmmm. Any help would be greatly appreciated 🙂

 

Images attached are:

1) Page before the chap opener

2) Chap opener

3) ADE preview of page before chap opener 

4) ADE preview of chap opener

Screen Shot 2021-01-12 at 06.41.12.pngScreen Shot 2021-01-12 at 06.41.29.pngScreen Shot 2021-01-12 at 06.52.19.pngScreen Shot 2021-01-12 at 06.43.31.png

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 11, 2021 Jan 11, 2021

Copy link to clipboard

Copied

By the way... this is only happening here in Chapter 2. At no other point does it occur.

🙂

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 12, 2021 Jan 12, 2021

Copy link to clipboard

Copied

Here is the HTML for this particular page.

Can anyone see what's going on here? I'm way out of my comfort zone and dont really know what any of this means.

How do I get rid of this line? It's appearing in all epub previewers.Screen Shot 2021-01-12 at 15.48.39.pngScreen Shot 2021-01-12 at 15.48.58.png

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines