• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

alignment

Enthusiast ,
Feb 19, 2023 Feb 19, 2023

Copy link to clipboard

Copied

Hi,

 

There are bullets (Screenshot 1).

There is some text (Screenshot 2).

Both share Left Indent: 1p10.

 

On Id, they are aligned (Screenshot 3).

On EPUB, they are not (Screenshot 4).

 

Is there any way to align them on EPUB?

 

Hosun

 

Screenshot 1Screenshot 1Screenshot 2Screenshot 2Screenshot 3Screenshot 3Screenshot 4 (Books app)Screenshot 4 (Books app)

TOPICS
How to

Views

1.3K

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 4 Correct answers

Community Expert , Feb 19, 2023 Feb 19, 2023

Remember that EPUB has no tabs. If the alignment in InDesign is dependent on tabs, it may not export with the same alignment between the bullet and the indented text.

 

If in the export options, Text, you have Bullets "Map to Unordered Lists," the export will create a standard <ul>/<li> list structure that can be styled using some InDesign spacing elements, but mostly CSS. The one flaw in EPUB export is that it does not define either the <ul> or <ol> 'wrapper' for lists, so the overall position

...

Votes

Translate

Translate
Community Expert , Feb 19, 2023 Feb 19, 2023

Bullets and numbered lists are very fussy. To start with, I'd use <margin> over <padding> on that <ul> definition. The two don't stack or interact in a normal way on lists. Here's some detail:

 

CSS Spacing for Lists
The spacing keywords margin and padding interact as a duo with HTML lists. Generally, margin and padding act on the ul and ol containers much as they do on a regular paragraph, but variations and quirks in the interpretation (web browser, EPUB, export HTML and Kindle) can make one or

...

Votes

Translate

Translate
Community Expert , Feb 20, 2023 Feb 20, 2023

It is complex. All of the spacing on the elements interacts and has to be adjusted as a set. It's also useful to 'zero out' default spacing on standard elements so you're not battling that. The exported CSS is a starting point to understanding what's going on.

 

Votes

Translate

Translate
Community Expert , Feb 21, 2023 Feb 21, 2023

Once again, this is a complex area of EPUB setup and there are several factors that work together (and sometimes against each other) in aligning bullet lists, especially relative to other text.

 

To sum up, though:

  • Defining <ol>/<ul > in the CSS both overrides some wonky defaults from InDesign and is best used to "zero out" the frame or "div" for lists so that other settings make more sense. At zero, list items should sit against the left margin of the reader... which may not be the left margin
...

Votes

Translate

Translate
Community Expert ,
Feb 19, 2023 Feb 19, 2023

Copy link to clipboard

Copied

Is the reason style based on another style? 

Votes

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
Enthusiast ,
Feb 19, 2023 Feb 19, 2023

Copy link to clipboard

Copied

Thank you very much for your reply.

 

As seen in Screenshot below, three paragraph styles are based on ch text.

 

Hosun

 

Screenshot 2023-02-20 at 1.30.12 AM.PNG

Votes

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 Expert ,
Feb 19, 2023 Feb 19, 2023

Copy link to clipboard

Copied

Have you got blank spaces in before the style name? Perhaps try remove those spaces, can't imagine it being the issue but maybe.

 

Also - can you break the link to the style - as a test to see if it's the link to the CH Text style that's causing the issue.

 

@James Gifford—NitroPress might have a better idea --

Votes

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 Expert ,
Feb 19, 2023 Feb 19, 2023

Copy link to clipboard

Copied

Remember that EPUB has no tabs. If the alignment in InDesign is dependent on tabs, it may not export with the same alignment between the bullet and the indented text.

 

If in the export options, Text, you have Bullets "Map to Unordered Lists," the export will create a standard <ul>/<li> list structure that can be styled using some InDesign spacing elements, but mostly CSS. The one flaw in EPUB export is that it does not define either the <ul> or <ol> 'wrapper' for lists, so the overall position of the list can't be easily managed.

 

If you add a <ul> definition near the beginning of the CSS, you can position the list using margin.

 

The only alternative, IIRC, is to use somewhat clunky ID spacing by letting the list define the left margin and spacing in the body text to match.

 


╟ Word & InDesign to Kindle & EPUB: a Guide to Pro Results (Amazon) ╢

Votes

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
Enthusiast ,
Feb 19, 2023 Feb 19, 2023

Copy link to clipboard

Copied

Screenshot 1.

I applied ul{padding-left: 16px;} to Bullets.

 

Screenshot 2.

I tried to align Reasons to Bullets.

When I increased Left Indent by 1 point, there is a big change to Reasons and space disappeared between Bullet 3 and Reason 1. It's OK in the text (Screenshot 3).

 

Are there more issues for me to resolve?

 

Hosun

 

Screenshot 1Screenshot 1Screenshot 2Screenshot 2Screenshot 3Screenshot 3

Votes

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 Expert ,
Feb 19, 2023 Feb 19, 2023

Copy link to clipboard

Copied

Bullets and numbered lists are very fussy. To start with, I'd use <margin> over <padding> on that <ul> definition. The two don't stack or interact in a normal way on lists. Here's some detail:

 

CSS Spacing for Lists
The spacing keywords margin and padding interact as a duo with HTML lists. Generally, margin and padding act on the ul and ol containers much as they do on a regular paragraph, but variations and quirks in the interpretation (web browser, EPUB, export HTML and Kindle) can make one or the other do slightly different things. You may need to experiment.


For li items, margin controls the space around the item, while padding-left controls the space between the bullet and the start of the first line. (The padding-top, -right and -bottom parameters can act much like margin, be ignored, or have unpredictable combined effects. Avoid using them for list items if you can.)

 

  • To control the overall spacing of a list, such as a little further from the prior and following items and the margins, use margin adjustments to ul or ol.
  • To control the spacing of each list item, use margin to set the “box” around it (usually just a few px) and padding-left to setthe distance of the bullet from the text… or more accurately, how all the text is indented from where the bullet sits on the left margin.

 


╟ Word & InDesign to Kindle & EPUB: a Guide to Pro Results (Amazon) ╢

Votes

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
Enthusiast ,
Feb 20, 2023 Feb 20, 2023

Copy link to clipboard

Copied

I appiled ul{margin-left: 0px;}.

It doesn't work.

 

To my view, padding-left looks like working as margin-left on Books app.

 

Hosun

 

Screenshot 2023-02-20 at 7.01.23 PM.PNG

Votes

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 Expert ,
Feb 20, 2023 Feb 20, 2023

Copy link to clipboard

Copied

It is complex. All of the spacing on the elements interacts and has to be adjusted as a set. It's also useful to 'zero out' default spacing on standard elements so you're not battling that. The exported CSS is a starting point to understanding what's going on.

 


╟ Word & InDesign to Kindle & EPUB: a Guide to Pro Results (Amazon) ╢

Votes

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
Enthusiast ,
Feb 20, 2023 Feb 20, 2023

Copy link to clipboard

Copied

[Screenshot 1]

I started from setting Left Indent and First Line Indent at zero.

margin-left didn't work.

 

[Screenshots 2 and 3]

I went with padding-left.

It looks like the best I can get.

 

Hosun

 

Screenshot 1Screenshot 1Screenshot 2Screenshot 2Screenshot 3Screenshot 3

Votes

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 Expert ,
Feb 20, 2023 Feb 20, 2023

Copy link to clipboard

Copied

Did you 'zero out' or otherwise experiment with the <ul> spacing?

ul {
margin: 0;
padding: 0;
}

 

...and experiment from there.

 


╟ Word & InDesign to Kindle & EPUB: a Guide to Pro Results (Amazon) ╢

Votes

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
Enthusiast ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

I was mistaken about zero out.

 

[Screenshot 1]

ul{margin: 0; padding: 0;}

 

[Screenshot 2]

ul {margin-left: 16px;}

margin is working.

 

[Screenshot 3]

To give a space between the bullet and the text, I applied

li.bullet-list {padding-left: 32px;}

It is not working.

 

Q1.

From your remarks, I should set margin in li.bullet-list. I have no idea about how to do in [Screenshot 4].

 

Q2.

What's the difference? (with and without px)

ul{margin: 0; padding: 0;}

ul{margin: 0px; padding: 0px;}

 

Hosun

 

Screenshot 1Screenshot 1Screenshot 2Screenshot 2Screenshot 3Screenshot 3Screenshot 4Screenshot 4

 

 

Votes

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 Expert ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

Once again, this is a complex area of EPUB setup and there are several factors that work together (and sometimes against each other) in aligning bullet lists, especially relative to other text.

 

To sum up, though:

  • Defining <ol>/<ul > in the CSS both overrides some wonky defaults from InDesign and is best used to "zero out" the frame or "div" for lists so that other settings make more sense. At zero, list items should sit against the left margin of the reader... which may not be the left margin of the screen.
  • The left margin for <li> sets the spacing between the margin and the bullet or number.
  • The left padding for <li> sets the text indent from the bullet or number.

 

...and that's in "most cases." There are times that either EPUB or the Kindle Previewer decides to interpret things a little differently, although I have found that this is usually a glitch, not the regular or proper way ID should be exporting the code. It helps to occasionally close InDesign (and the document) and ropen it, then export to see if you get a different result. Some complex documents and CSS files will only export correctly once, and then start getting odd little glitches on repeated exports... I don't know why and it's not readily repeatable. So try that close-and-restart when all the numbers in the CSS defnitions aren't doing what you expect.

 


╟ Word & InDesign to Kindle & EPUB: a Guide to Pro Results (Amazon) ╢

Votes

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
Enthusiast ,
Feb 21, 2023 Feb 21, 2023

Copy link to clipboard

Copied

LATEST

I'd rather go with Screenshot 2.

 

Thank you very much for your help.

 

Hosun

Votes

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