Updated 10-May-2011 (added alternate option, thanks to Bob’s comment)
Publishers quite often generate multiple paragraph styles for bulleted and numbered lists behaviour. For instance the first or last bullet point in a list might have slightly different space before and after settings applied to it.
I’ve been working on demo materials for the upcoming Print and ePublishing conference and was using the following style names:
- Bullet-1
- Bullet 2
- Bullet-1-last
- Bullet-2-last
The styles were part of a style group named “Lists”.
For each of the paragraph styles I left the Tag option set to [Automatic]. This ensures that InDesign automatically generates <ul> and <li> tags in the resulting html correctly, based on the selected EPUB export options.
And I assigned the same class-names to Bullet-1 and Bullet-1-last (bullet-1, sticking to the recommendation for xhtml to use lowercase characters).
Then exported the Lists sample file I had ensuring Bullets are Mapped to Unordered Lists (which will generate <ul> and <li> tags in the resulting HTML:
You can imagine I was quite surpised to see InDesign generate the following in my HTML and template.css:
What InDesign’s doing here is recognising for the “Bullet-1-last” paragraph style that it needs to set the Class name to “bullet-1”. However, for this particular paragraph style (and “Bullet-2-Last”) it adds the Style Group name as a prefix.
It puzzled me… and I couldn’t let it go until I finally figured out how to fix this (I’m not one to give up easily 🙂 ). After trying a number of things:
Changing the paragraph style naming convention to not include the first hyphen seems to fix the issue. Turning “Bullet-1” into “Bullet1” and “Bullet-1-last” into “Bullet1-Last” etc.
As soon as I reran the EPUB export using the new style naming convention, the problem corrected itself, and InDesign correctly ignored the Style Group name when generating HTML and CSS.
Bob Levine (see comments below, thanks Bob!), points out you can also enter your own Tag as part of export settings. In running a quick test this morning (10-May), it seems that setting the Tag to <li> tag also resolves the issue. So solution number 2 (and definitely the easier one) would be:
To retain original style naming and enter your own tags instead.
That leaves an interesting issue with [automatic] setting … to say the least 🙂 (maybe it is a feature? I’m not yet sure… will have to spend a little more time testing when I’ve got some more time on my hands later today).
@iain I’d check the InDesign document to see if there are any style overrides within the InDesign document that cause this to happen. Clear any style overrides in InDesign and try exporting again.
I have an ID doc (CS5.5, Mac) with one bullet list and one numbered list. In the para styles for both lists I have specified in Export Tagging “li” for the tag (thanks Bob & Cari) and class names to match the respective styles in my CSS file. In the ePub file both come out as lists okay but after the bulleted list, which is indented by default, the rest of the text carries on the indent. The numbered list later in the story is indented but the indent ends after the end of the list. Looking at the code it seems that ID doesn’t add the closing tag after the unordered list. The tag is right at the end of the page, just before the tag! Not only that but the para that follows the list has code to start a new list, but is just a normal para.
Anyone seen that before?
Does your export really generate [ul] [unordered list tag] without a class?
My CS5.5 exports all add an auto-generated class to the [ul], as in [ul class=”List-1″]. I don’t see any setting in InDesign to affect the [ul] class, only the [li] class.
@David That is correct, I don’t see a class reference for the <ul> What Export Tagging settings are you using for the paragraphs that are the bullet-points in your document? Also are you testing on Win or Mac (just want to see if there might be a difference).
Indeed (or should that be InDeed?) the more you can do with the CSS the better…and faster you’ll get the job done.
p.s. I’d rather be sleepin’ at 5am too… but on this morning I had a super early meeting at customer 🙂
@Bob ha, you’ve just revealed the topic of my #PePCon session on CSS from InDesign CS5.5 … Will even be covering sibling selectors 🙂 to limit number of classes added and auto-apply cool layout rules… (One of the reasons my demo files had the Bullet-1 and Bullet-1-Last 😉 )
The only thing I want to be doing at 5AM is sleeping, unless it’s your 5AM in which I’ll be thinking along the lines of a cold beer. 🙂
Oh and back to the topic at hand, the cleaner you can keep the HTML code (as little use of classes as possible) the better.
@Bob
Ay, that’s excellent 🙂 Learnt s.th. new today… and at 5am as well 🙂 Ran a super quick test just now and changing [automatic] to [li] seems to remove the issue as well. Nice!
(mind you, I’ve had CS5.5 installed for a couple of days… so learning like the rest of us 😉 )
Just type them in, Cari. p, h1-h6 are presets but you can type right over them for anything you want.
@Bob, I wasn’t aware you could use CS5.5 Export Tagging to map to “li” tags” thought only h, h1-h6 and p are currently supported and “li” are generated automatically… Maybe I am missing s.th. Will have another look tomorrow and do a bit more testing. (I’ve not wanted to report it, as felt not reviewed enough yet…)
Interesting post, Cari. I admit to being an EPUB newbie, but not to HTML and I’d like to run this past you.
Instead of setting the bullets and numbers to auto, set them to map to li tags. This way you can go in an just edit the ol and ul tags adding a bit of margin to the bottom to give you the extra space.
This also cleans up all the classes.
What do you think?