How to get images to respect right margin

This forum is for all Flare issues related to PDF, eBook, Microsoft Word, Adobe FrameMaker, XPS, and XHTML book targets.

How to get images to respect right margin

Postby sarahb on Fri May 08, 2020 8:49 am

I have images using various indents based on whether the image falls under a numbered list or bulleted list (or a sub-bullet which is nested even further). For my <img> tag, I have max-width: 100%;. From what I understand, that means the image can be 100% of the maximum width of the object in which it's contained. I assumed the "container" for the object was the page layout margins/body margins (for print). But the image doesn't seem to respect the right margin--it overflows.

wide-image.png


How can I address this? I want these type of wide images to not exceed the right margin when indented with an indent style. Regular paragraph text obeys the right margin, no matter what indent style I put on it. So why can't images?

If the page layout margins/body margins are not an image's "container", can I define a container to put the image in? For example, that container would have a set maximum width (say 7in), and then the image inside that container would have a max-width of 100%. So if an image is indented within the 7in container, it will auto-scale/size and not exceed the 7in container width. If this is possible, anyone have any idea on how the CSS code would look?

Sarah
You do not have the required permissions to view the files attached to this post.
sarahb
Propeller Head
 
Posts: 25
Joined: Sun May 14, 2017 6:30 pm

Re: How to get images to respect right margin

Postby robdocsmith on Mon May 11, 2020 7:02 pm

Hi Sarah,

How is the image (and other indented paras) formulated on the page? I think the behaviour of max-width depends on how the img is placed on the page.

If I insert a very wide image into a set of nested bullets with para tags as below, the image scales according to the level of indent of the containing bullet, as you'd expect it to work. If I do the same into a paragraph that isn't contained in a bullet, but the paragraph has an indent using margin-left or padding-left, the image is not scaled.

This works for me:
Code: Select all
<ul>
   <li><p>This is a bullet</p>
   <ul>
      <li><p>This is a nested bullet</p>
      <p><img src="verylargeimage.png" /></p>
      </li>
   </ul>
   </li>
</ul>

css:
img  {max-width: 100%;}


This doesn't work for me:
Code: Select all
<p class="indented"><img src="verylargeimage.png" /></p>

css:
img  {max-width: 100%;}
p.indented {margin-left: 30mm;}


In the second case the image overhangs the right margin by the amount of the left indent of the paragraph.

However, this does work for me:
Code: Select all
<div class="indented"><p><img src="verylargeimage.png" /></p></div>

css:
img  {max-width: 100%;}
div.indented {margin-left: 30mm;}


I'd suggested using paras inside the list elements as it's easier to follow what is going on. Use Ctrl+; to turn a simple list item into a list item with paras. Once done, pressing Return at the end of the list item will add a new nested paragraph instead of a new list element.

Hope that helps,
Rob
robdocsmith
Propeller Head
 
Posts: 81
Joined: Thu May 24, 2018 3:11 pm

Re: How to get images to respect right margin

Postby sarahb on Thu Sep 03, 2020 12:26 pm

Sent this to MadCap Support and they said they were "unsuccessful at applying the desired behaviour", so they've written up a feature request on my behalf. They provided a reference number for the feature request, but when looking for a status update a month later, they said they could not provide status updates. So, that's fun. :roll:
sarahb
Propeller Head
 
Posts: 25
Joined: Sun May 14, 2017 6:30 pm

Re: How to get images to respect right margin

Postby Nita Beck on Thu Sep 03, 2020 3:47 pm

Agree with the suggestion that you nest paragraphs and other elements within list items so that the content is contained in a single list. This is especially important for accessibility, if you’re producing HTML5 output. A screen reader needs to identify the structure of the list.

Learn how to nest elements within a list item here: https://help.madcapsoftware.com/flare2020/Content/Flare/Lists/Main-Activities/Adding-Paragraphs-Between-List-Items.htm.

HTH
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3363
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: How to get images to respect right margin

Postby Nita Beck on Sat Sep 05, 2020 2:46 pm

Also, this blog article might be of interest: https://www.madcapsoftware.com/blog/using-print-styles-effectively/
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3363
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: How to get images to respect right margin

Postby Nita Beck on Sat Sep 05, 2020 2:46 pm

Also, this blog article might be of interest: https://www.madcapsoftware.com/blog/using-print-styles-effectively/
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3363
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY


Return to Printed Documentation Targets

Who is online

Users browsing this forum: No registered users and 6 guests

cron