Box padding/alignment to text or vice versa

Question

 Hi, 

I'm having a right issue with this. I'm having a problem with just having a filled box having equal padding on the top and bottom.

• Have set the text box to have a fill and inset spacing of 24px - I end up with a result of the bullets not rendering properly and still 
• Have set the text box to have a fill, no inset spacing but an outside stroke - I end up with a odd line around the text frame.
• Have created a separate box behind the text frame, and used other empty frames to set spacing of equal size 
• Have created a separate box behind the text frame, and used other frames to set the spacing, this time with the bottom being a larger height. 
• Have tried grouping the box and assets together 

I have tried multiple work arounds with this and all I want to do is have a text frame, with a fill, rounded corners, and equal padding. 

Settings wise, the document is being exported with text rendering as HTML+ local font and I've tried HTML + websafe. The font used in the document is open sans - which is provided in the CSS from google fonts. 

Padding at the bottom isn't the same

Normal box in indesign

Rendering wrong and the padding is off

There are about 20-30ish pages with this similar layout, each with different amounts of text,so I could do with something I can control with a style. I know there are options to have text rendered as image and or convert the bullets to text (which in itself is a nightmare because tabs do not work??). Unfortunately these are not solutions as this document needs to be accessible.

Any solutions for this?

Many thanks,

Tom

Comments

FYI I have also just tried installing googles fonts 'Open Sans' (OTF) and using that rather than Adobe's version of Open Sans and I have the same result.

Tom

Answer 1

First, check that you're using the latest version of in5. The current version is v3.8.24. You can check your version by going to in5 > Info and Updates... and checking the version number in the upper right of the in5 - Info & Updates dialog that opens. If it's an earlier version, try downloading the latest version, installing it, and re-exporting your content.

It's possible that the issue with the formatting 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. Here is a video that shows how to clear the style overrides.

If you do export with Text Rendering set to either HTML with Local Font Embedding or HTML with Web-Safe Fallback Fonts, then 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 Text Rendering.

For the bullets, I would recommend converting the bullets to text. Select the affected text and go to Type > Bulleted and Numbered Lists > Convert Bullets to Text. ​Text Wrap only works under certain conditions with live text in HTML. Here's a video with more information.

If you're still having issues, then please email us at support@ajarproductions.com.

Comments

In reply to your previous post, In5 version is up to date. All overrides were sorted before this. Any other advice, such as converting bullets, I've mentioned is not suitable and stated in my original post, as I need tags to be accessible.

I did find an issue with this which I solved with an overwrite. When exporting, in5 is adding a "letter-spacing: -0.25px" css line to the 'body', which completely overwrites all the tracking in the document, making lines not appear the same in the browser. This makes designing a box incredibly tedious.

I would still like to be able to add a fill and inset padding to a text box rather than a text box and a rectangle shape behind, as then I don't have to manage two objects, but I do run into the same issue with bulleted lists appearing like my image above. The same issue happens with numbered lists as well.

Tom

---

Hi Tom,

If you use HTML text rendering with your bullets, I would recommend converting them to text (Type > (Bulleted and Numbered Lists > Convert Bullets to Text). That conversion in InDesign does create tabs, and tabs in HTML are simulated. You can control the amount of space between the bullet and the first word by replacing the tabs with Em Spaces or other types of White Space (Edit > Find/Change...).

HTML text often renders larger in the browser, so spacing may not be identical to the layout. When the text rendering priority is to have the output match the layout, then we do recommend setting Text Rendering to Images. You can use this text rendering option or set only these  frames to become images in conjunction with the Mobile Article Explorer so that you can make the HTML text available and accessible.

To keep your Text Rendering as HTML text for all of your document with the exception of these frames, do either of the following:

Use Object Export Options

1. Select the text frame
2. Go to Object > Object Export Options
3. Select the EPUB and HTML tab
4. Set Preserve Appearance From Layout to Rasterize Content
5. Set the Format (PNG will maintain transparency)
6. Set the Resolution to 150 for High Definition or 72 for Standard
7. When you export (in5 > Export HTML5 with in5...), go to the Advanced section of the export dialog
8. Set Image Quality to Use Object Export Settings

Here's more information on converting text to images including how to set the Object Export Options as an Object Style:

• How to Control Image Quality

And here's a video that shows how to apply an object style to multiple objects:

• How to Apply Object Styles to Multiple Items at Once in InDesign

or

Use Render Groups as Images (which will turn any other group in your document into an image)

1. Group the content that you want to turn into an image (if there's nothing to group with it, you can use an invisible rectangle--one with no stroke and no fill)
2. When you export (in5 > Export HTML5 with in5...), go to the Advanced section of the export dialog
3. Select Render Groups as Images