Bullet Point style exporting differently, with extra spacing

Question

Hello.

When I export to web, all bullet points throughout my document show up differently than my paragraph style settings, rather than having the correct indent, the bullet point is fixed to the left and the text is as if it has been tabbed right a couple off times, is this a known issue? It is as if it is ignoring the paragraph style

Thanks

Also when viewed on the phone the fonts default to arial (im exporting as web safe fallback fonts or font embedding)

Answer 1

There are 4 different ways that you can export text with in5 that include two HTML options. 

• Images (preserves exact appearance)
• HTML with Web-Safe Fallback Fonts
• HTML with Local Font Embedding (when possible)*
• SVG (preserves appearance + scalable)

The best way to make your InDesign layout match your in5 output is to set Text Rendering in the Basic section of the Export HTML5 with in5 dialog (in5 > Export HTML5 with in5...) to Images. 

If you are using either of the HTML text options, it's possible that the issue with the bullet styles changing is due to style overrides. You can view them in your InDesign layout by going to the Character Styles panel menu or the Paragraph Styles panel menu and selecting Toggle Style Override Highlighter. When that option is enabled, text that is formatted with overrides to the styles appear highlighted in cyan.

If you export with in5 and Text Rendering is set to Images, the style overrides shouldn't be an issue.

However, when you export with Text Rendering set to either of the HTML options, in5 uses the Character, Paragraph, and Object Styles to create the CSS. If there are overrides, then in5 goes through a series of checks to try to "guess" what the style should be. These overrides can cause unintended results. So if you'd like to export with HTML text and the HTML text styles aren't rendering as expected, clear any style overrides.

Here's more information on setting Text Rendering with in5:

• Controlling Text Rendering

And here's a video that shows how to clear the style overrides:

• How to Clear Style Overrides — InDesign & in5 Long Document Best Practices

You can also try converting the bullets to text (Type > Bulleted & Numbered Lists > Convert Bullets to Text).

If you're still having trouble with the bullets, would you be able to send us the following for us to troubleshoot?

• Your InDesign file or a sample file that recreates the issue
• Your html5_output folder

You can send your files here:

• https://ajarproductions.com/pages/contact.php?category=in5

Comments

HI. Thanks for the detailed feedback.

I will definitely read the two links and see if I can find a solution there.

It seems as the issue is to do with either tabs or indent spacing, the distance of a tab within indesign doesent seem to match the distance off the output file, its the same if I do a manual tab in the body text somewhere

Rendering text as images is not an option as we need crisp text using desktop scaling and we also need it so users can copy and paste it.

Thanks

---

You can set Text Rendering to Images and add the HTML text back in using the Mobile Article Explorer.

Alternatively, after converting bullets to text, you could replace tabs with spaces.