Image Containers?

[dorcutt]

Hi all, pesky newbie back again.

This time, I'm curious what people do for image containers. Do people put them in paragraphs, divs, or straight in the body? I know some people wrap them in a div for captioning and the like, but where do you put the actual <img> tag?

I'm trying to figure out how to get the images to fit closely to my text in PDF output, and that means altering padding after and/or before paragraphs. Currently, my paragraph tags have a default 6 pt top and 10 pt bottom padding (yes bad I know; I'll work on converting them to px or em soon, but that's mostly a different issue).

What I'm kind of leaning towards is three classes of paragraph tags:
p.BeforeImg (no bottom padding)
P.Image (2 px padding for top and bottom)
p.AfterImg (no top padding)

I haven't really worked out what I'm doing in the way of figure number/captioning yet. This seems awfully clunky and generally wrong to me... is there a "best practice" for this sort of thing?

[SteveS]

I use a p.img tag.

BTW, why do you need a before and after image class? I would be inclined to add the margin/ border/ padding values to the top and bottom margin/ border/ padding properties.

HTH

[Msquared]

Ah, images. I still haven't worked out quite what goes on there, so perhaps someone else can enlighten me too. But this is how I've made them work for me . . .

When I place an image, I note that sometimes Flare places it inside a <p> and sometimes it doesn't. There seems to be no obvious logic to which it chooses, although I suppose there must be. So, when I place an image, I make sure it is inside a <p>, and if not, I add that manually.

Then, I have some img styles which set image properties, like maximum width, height etc, for example img.MaxWidth600, which is exactly what it sounds like, so I apply those to the <img> as required. Then I have some <p> styles created specifically for image placements, which control things like margins, paddings etc. I apply those to the containing <p> as required.

This works for me most of the time, although others may have better ideas. But sometimes I notice that despite the img style specifying a maximum size, it isn't always honoured, so in those cases, I grab a corner of the image and manually resize it in the Flare editor, which applies the styling as inline styling. I don't like doing that, of course, but life is too short to get to the bottom of every mystery.

[NorthEast]

I wouldn't recommend using a p.before and p.after ; you might not want a paragraph before/after the image (e.g. a list or a heading), or you might want to use a different paragraph class (e.g. p.note or something).

Instead, I'd suggest setting the top/bottom spacing using margins, rather than padding.

When two paragraphs (or any block-level elements) are placed next to each other, the vertical margins are collapsed.

For example, say you have:

Code: Select all

p { 
  margin-top: 20px; 
  margin-bottom: 40px; 
}

If you have two 'p' tags next to each other, the spacing between them will not be 60px (bottom 40px + top 20px); it will be only be 40px, the margins are collapsed together so that the largest value is used (the first paragraph's bottom margin 40px).

So for your example, you just need to set the p.img tag to have a larger top/bottom margin (and remove the padding); that will set the spacing with previous/next paragraphs, without combining the spacing together (as would using padding).

[dorcutt]

Thanks for the excellent responses! It certainly seems like <p> tags are the way to go and making one or more p.img classes is a necessity.

My issue is basically that I want less spacing between a paragraph and an image than I do between two paragraphs. That was why I was making the p.before and p.after styles, though I suppose I could use that more generally as P.ShortBottomM and p.ShortTopM (or, perhaps better, general classes .ShortBottomM and .ShortTopM). I suppose the other alternatives are trying to use negative top and bottom margins (which seems like a nightmare if I want it to render in some browsers such as IE7, which I probably do) and just giving up and making the space between paragraphs the same as between images and paragraphs.

Thoughts?

Edit: Dave, you raise a valid point about p.note, etc. I think I'm going to make a .ShortBottomM and a .ShortTopM generic class and use it in a few cases when I want the image to be in tight to an existing paragraph, and more generally just deal with the image spacing being the same as the paragraph spacing.

[LTinker68]

My issue is basically that I want less spacing between a paragraph and an image than I do between two paragraphs.

First, an img is not a self-contained tag. That is, an img tag can't exist by itself, it has to be enclosed in something else (p, div, td, li, etc.).

Second, if you want to control spacing between a paragraph with just text, for example, and a paragraph with an image, then you can do that with a paragraph class used specifically with the image (p.img to use someone else's example, or p.screenshot, which is what I use) and/or you can use a complex selector. So if your base paragraph has a bottom margin of 20px but you want the image to be closer, then I believe you can set p.screenshots (or p.img) to have a margin-top of -10px, for example. The downside of that option is that it would have a negative top margin no matter what preceded the imaged paragraph, and you might decide that you want the standard distance between a table and the imaged paragraph, for example.

So what you could do is set the p.screenshots class to have a top margin of 0, and instead add a complex selector that controls the top margin of p.screenshots when it follows another paragraph. Off the top of my head, I think the complex selector would be:

Code: Select all

p + p.screenshots {
    margin-top:-10px;
}

I might have the wrong complex selector, so double-check that. The downside of that option is that if you have p.note before p.screenshots, then I think you'll have the normal distance, not the decreased distance (I don't think p.note will inherit from p + p.screenshots, but I could be wrong).

(Dave Lee, does that sound right?)

[NorthEast]

(Dave Lee, does that sound right?)

I think the basic idea of using CSS3 selectors is right - it's probably how I'd approach it when working with non-Flare web content.

The problem is that Flare doesn't properly support many CSS3 selectors.
For example, the ~ selector isn't supported at all, and using the + selector will work correctly in web outputs but not PDF.

I can't comment on the use of negative margins, I've never used them and don't know if they work properly in different Flare outputs, browsers , etc.

Generally though, I'd recommend looking at the margin/padding of all your styles, and how they interact with collapsing vertical margins. I found I could set things up ok without having to use CSS tweaks to adjust the spacing.

[dorcutt]

Wow, thanks for the excellent feedback LTinker and Dave. I'd never heard of the + (or ~) selectors, so I'll mess around with them some but it sounds like that might not solve my issues for PDF.

I'll definitely mess around with this some once I'm done with this immediate project and I have a chance to really play with my Flare configuration again and update this thread.

[LTinker68]

I didn't think the + selector was CSS3 -- seems like that's been around a lot longer, but earlier versions of Flare didn't play with it well. Of course, CSS3 has probably been around longer than I think and it was just slow to be adopted, so I heard of the + selector a long time before browsers or Flare supported it.

[NorthEast]

I didn't think the + selector was CSS3 -- seems like that's been around a lot longer, but earlier versions of Flare didn't play with it well. Of course, CSS3 has probably been around longer than I think and it was just slow to be adopted, so I heard of the + selector a long time before browsers or Flare supported it.

Sorry, + is CSS2, ~ (precede) is CSS3.

Anyway, Flare doesn't complain about the + selector, but it doesn't work correctly in PDF; you'll get different (and correct) results if you use it with help (browser-based) outputs.

[michaelm]

thanks for the info