I’m going to show you a cool way to manage the size of images in printed output, specifically PDF, using CSS. Essentially, I’ll show you how a single settings can cover a large percentage of scenarios when inserting screenshots, etc.

 Image size, meaning dimensions, is not as critical in online help as it is in printed and this solution, in my opinion, is not recommended for use in online help.

 

I’m going to start with this page.

imagesz4

Now I need to add an image and I’m going to use the neat-o-rific shortcut shown here.

imagesz5

Easy enough to add…but now I have a problem: the image is wider than the margins.

imagesz3

There are a number of ways I could go here including using the little resizer tool in the bottom right-hand corner of the image.

imagesz6

It’s easy, sure, but when you do it this way, you’re resizing it to a particular size that may not be ideal for multiple printed outputs.

You could also resize it via Capture and the Print size option.

imagesz7

But again, it would be a set size that may work great in this particular instance but not others. Let me show you why it’s a quick fix – but not ideal.

Via this screen in Capture, I’m going to change the print size from it’s current size of 6.96 inches across to 5.86 inches. I settled on this after trying a few intermediate sizes to see which would result in the image fitting in the margins.

imagesz8

Here’s what the newly resized image looks like in the topic:

imagesz9

Looks great, right? But what if I want to use that same image again somewhere else? OR I want to reuse it in another output like a small pamphlet instead of a standard 8 1/2×11 page?

Here’s the same page in a 5×8 pamphlet with 1/2″ margins, etc. Check out the image.

imagesz10

Wow, that’s a mess! My first thought is to resize the image to fit – but then I realize that resizing it here will result in the image being much smaller when printed in the regular PDF.

The solution is to create an img class called screenshot (or whatever you want to call it) and set the max-width (in the Unclassified property group) to 100%. Be sure to do this in the Printed medium only!!

imagesz12

¬†Don’t set this style to the root img or ALL of the images in your project will be affected. You want to limit this setting to only those images that you label as screenshots.

 

I do a build of the standard-sized document and the pamphlet (exact same content, just a different size PDF).

imagesz13

Notice how the image (the identical file!) is produced in two different sizes.

Now, I added the image in a nested list in the same topic. Let’s see how that turned out. Below is the identical file in two different locations in the same document. You can clearly see how the images are resized to fit the space they’re in.

imagesz14

Behold the power of ‘max-width’ for images!!!!

Try it out and let me know how it turns out.

 

One feature I just love in Flare is the toggler. It’s some cool DHTML that my clients usually love and want more of.

BUT…

(You knew there was a big but coming didn’t you?)

I’m not fond of the little toggler icon that comes in the WebHelp stylesheet. Sure it works, and in the absence of all else, it’ll do. But it’s just Meh.

webhelp_toggler

(I use WebHelp a lot because some of my clients still build to support IE7).

Granted, the icon in the HTML5 stylesheet looks a lot better.

HTML5-togglerThe box that the plus and minus sign are in is much less obvious, it looks like they took the drop shadow off the original icon, and they added a gradient to the inside of the icon.

But what if you’re building webhelp and you different icons than the square with the arrow in it?

It’s pretty easy to do….you just need to have two tiny icons ready. And when I say tiny, I mean tiny.

new_icons

Each is only 12×15 pixels.

Now, open your stylesheet and make sure you’re in the media with which you build webhelp. In my instance, it’s Default.

Scroll down to the MadCap | styles and look for the MadCap | toggler entry.

toggler_in_list

(Don’t worry about the Pseudo Classes.)

Now, look for the Unclassified Property Group on the right side. When you open it, you’ll see the mc-closed-image (highlighted below) and the associated image.

toggler_unclassified

Scroll down a bit further and you’ll see the mc-open-image property and its image.

toggler_open_image

We’re going to replace the images in these two locations.

So, since I’m in the mc-open-image property, I’ll do that one first. Click in the image area and you’ll be prompted to select an image. Find the open icon you want to use and select it.

toggler_open

And I’ll repeat this process for the closed image.

toggler_closed

And I’m done!

Let’s do a build and see what the new icons look like.

toggler_better_icons

Much better!

Try it out and let me know if you have questions.

 

%d bloggers like this: