How do I indent left-aligned images?

This forum is for all Flare issues not related to any of the other categories.
Post Reply
SDWriterClmt
Propeller Head
Posts: 46
Joined: Wed May 30, 2018 1:22 pm

How do I indent left-aligned images?

Post by SDWriterClmt »

Flare 2018, in case it matters.

Hi all. I would like to have my images left-aligned but not quite all the way over to the left edge. Just near it. Left-aligning the image is no problem of course, using the Home>Paragraph>Left-align ribbon button. But when I try to use the Home>Paragraph>Indent button on that image's paragraph, it opens a dialog for creating a Group. Is there a good reason that Flare is prompting me to do this?

So when I say "Yes" to whichever existing group is pre-selected, the image does indent. But then it's enclosed in some group tags I don't care about or want. (Mine happens to default to "Blockquote" but there are other choices).

Anyone have advice on the best way to do this? Create a new image style maybe? Or just create a specific group for this kind of formatting?
Nita Beck
Senior Propellus Maximus
Posts: 3669
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: How do I indent left-aligned images?

Post by Nita Beck »

Rather than using inline formatting (which is what Home>Paragraph>Left Indent is doing) and rather than putting it into a div or blockquote, you can try either of these ideas, both CSS-based.

One way is to create a class of p such as p.Figure that has its left margin or left padding set to a certain amount of space, in order to achieve the indent. Then apply that class to the paragraph into which you have inserted the image. (Alternatively, you can create a generic class called .Indented that has its left margin or left padding set. You can then apply that generic class to paragraphs, lists, headings...)

Another way is to create a class of img such as img.Indented that has left padding set to a certain amount of space, in order to achieve the indent. Then apply that class to the image.

With either of these ways, all p.Figure paragraphs or all img.Indented images will have the exact same left margin or left padding.

This is a much better solution than using inline formatting. In fact, a rule of thumb is to avoid inline formatting to the greatest extent possible. When you use inline formatting, your formatting solution may work nicely for one output type, such as PDF, but won't work as well for another output type, such as HTML5. But by controlling the indentation via CSS, you can then control the amount of indentation -- or even any indentation at all -- via CSS mediums.

HTH
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
SDWriterClmt
Propeller Head
Posts: 46
Joined: Wed May 30, 2018 1:22 pm

Re: How do I indent left-aligned images?

Post by SDWriterClmt »

Thank you! That's a much more detailed and accurate way of describing my "create a new image style" description. I'm very comfortable working in the Word world and wouldn't have thought twice about just creating a new style for a template. But I'm kinda new to working with CSS in Flare.

both of your suggestions are good: either an indented-image class or a more generic indented-paragraph class.
SDWriterClmt
Propeller Head
Posts: 46
Joined: Wed May 30, 2018 1:22 pm

Re: How do I indent left-aligned images?

Post by SDWriterClmt »

FWIW, I just found this handy guide for creating style classes here on Madcap's site:

https://help.madcapsoftware.com/flare20 ... lasses.htm

They even use img as their example. I'll see if I can follow along and create similar to the existing img.AlignLeft but that's also indented. Maybe calling it img.AlignLeftIndented10 or similar.
SDWriterClmt
Propeller Head
Posts: 46
Joined: Wed May 30, 2018 1:22 pm

Re: How do I indent left-aligned images?

Post by SDWriterClmt »

Well that worked like a charm. Once again, thanks Nita!

I created a new class called img.AlignLeftIndented, padded on the left 20 pts.
Post Reply