Recently, a client asked about a way to create cell content that contains an image to the left while having the text indented the width of the image.  Below is a solution, without using embedded tables in Flare.

Notice in the screenshot below the image is in the upper left of the cell and the text starts at the same line without wrapping.  Again, this used to be done by simply embedding a 2 column by 1 row table inside each cell, placing the image in the left column and the text in the right column. Now we’ll show you how to achieve this look by using two styles.

Table

What you will need:

  • A Flare Project with a topic open in the editor with a table inserted in it
  • A couple of small, thumbnail sized images
  • An Image Style
  • A Paragraph Style

We’ll start by inserting a 2×2 table in your topic.  We set the width to 500px and selected the “Rows” table style, but this is not necessary.  We’ll then add our images, another paragraph that contained our text and you should have something like this:

Table B

Notice in the Block Bars that there are two paragraphs in the cells.  One contains the image and the other contains the text.

Next we want to create two styles; one for the image and one for the paragraph.

Image Style

  • Open the style sheet that you are using in the CSS editor and select the Image Style
  • Right-click it and add a class (we named the class “absolute”)
  • Select the class “absolute”
  • In the Properties side, expand “Positioning”
  • Set the “position” value to “absolute”
  • Click on to another field and Save
    Image Style

Paragraph Style

  • Select the ‘p’ style in the style list
  • Right-click it and add a class (we named the class “leftPadding40”)
  • Select the class “leftPadding40”
  • In the Properties side, expand “Padding”
  • Set the “padding-left” value to “40px” (this may vary depending on the size of the image you used)
  • Click on to another field and Save
    Paragraph Style

 Applying the styles to the table content

  •  Right-click each image and apply the “img.absolute” class to itimg.absolute Class
  • Right-click on each of the Paragraph Block Bars that contain the text and apply the “p.leftPadding40” class (Do Not apply this class to the paragraph that contains the images)p.leftPadding40

When you are done you should have a table that looks like this in the Topic Editor:

Table in the Editor

If you are outputing the topic to any of Flare’s web outputs, the table will look great in the output (as it does below). 

Table

For the time being, however, the print outputs do not support these steps.

About The Author

Jose Sermeno

About Jose Sermeno

With over 10 years of experience in the software industry, Mr. Sermeno brings a wealth of knowledge and expertise to the product evangelist team, helping introduce new users to everything MadCap Software. In his spare time, Jose is the Project Director for San Diego City Robotics, the San Diego community college systems robotics program, and enjoys working in software design and open source hardware development. Prior to joining MadCap in late 2010, Jose ran a Drupal development shop, and was an application manager for Temple University Health System.

Last Modified: November 7, 2012

This entry was posted in MadCap Flare, Tech Comm, Tips & Tricks. Bookmark the permalink.

Comments

  • Troy Wells November 8, 2012 at 4:51 AM

    There is an easier way when you want the same image to appear multiple times, like a special bullet. I worked this out with MadCap support. It involves using a graphic as a background image. The following is an example of one of many styles I created using this method:

    p.Image_left
    {
    background-image: url(‘../Images/image.gif’);
    background-repeat: no-repeat;
    padding-left: 24pt;
    padding-top: 0pt;
    min-height: 18pt;
    }

    Your padding-left will vary depending on the size of the graphic you use.

    You also must use the “min-height” for graphics that are larger than a single line of text for those cases when you only have a single line of text. Otherwise, the bottom of the graphic will be cut off.

    Also, everything about the above method works for PDF output, as well as the online outputs, except for the “min-height” property. So you can use it for PDF output only if you are sure you will have enough lines in each paragraph to match the graphic height.

Have Something to Say?

Your email address will not be published. Required fields are marked *