SOLVED: Single line, text left, text right — too darn hard?

[Phlawm53]

I want to create a single-line heading that has some left-aligned text AND some right-aligned text. The longer I try to find my way through this, the worse the results get…

The effect is as follows:

HEADING2 Text left-aligned......[periods used only in this example to force spacing]......HEADING2 Text right-aligned

(That is, the periods and intervening text are only there to illustrate that some H2 text is on the left margin of the page, and some H2 text is on the right margin of the page, and they are both displayed on the same line.)

I suspect there's a reasonably elegant way to use CSS to do what I want. Alas, my Web searches have provided several similar — but not identical — methods, NONE of which seem to be working especially well.

What I've tried so far is using the information on this page: http://css-tricks.com/left-align-and-ri ... same-line/

Here are the CSS styles I've tried so far:

Code: Select all

div.floatBox
{
	margin-top: 2em;
}

h2.floatLeft
{
	margin: 0em;
	float: left;
	display: inline;
}

h2.floatRight
{
	margin: 0em;
	float: right;
	display: inline;
}

div.clearBoth
{
	clear: both;
}

The idea is that the floatBox div is necessary(?) to contain the floatLeft and floatRight heading styles(?) clearBoth in turn "cleans up" the area below the left-right aligned heading styles(?)

All this sort of works, but it seems overly time consuming to apply, doesn't behave consistently, and breaks easily. (And the more I try to understand what's happening, the more snarled the whole thing seems to get…)

So is there a "clean" way to do what I want? Not only do I not want avoid needing to take five minutes to create each instance of H2s that contain left and right-aligned text, I want the result to be usable by someone who isn't a CSS expert…(?)

Cheers and thanks in advance for your help,
Riley

[LTinker68]

Although trying to do things via CSS is desired, it may not always be practical. In this case, my first question is, what output type(s) do you use for this project? The float attributes work for online outputs (WebHelp anyway, not sure about CHM), but not so well for print outputs. I just ran into a similar problem with my notes text. I have three different icons (generic info, tip, and warning) used next to my notes text. In WebHelp output, the icon floats so that it's slightly above and to the left of the first note character and overlaps the top border of the note text. This effect doesn't translate well to print outputs. For PDF output, I had to modify my CSS in the print medium so that the note icon had a negative margin so that it sits to the left of the note text and doesn't overlap the top border. Not as elegant as the online presentation, but still suitable.

I point this out because while you can use the float attributes to get the effect you want for online output, it most likely will not appear the way you want in print output. Which means you either have two headings in a topic, one conditionalized for online and one conditionalized for print, both with different CSS styles applied, or you use a method that works for both online and print. In this case, a two-celled table with no borders. Not as elegant code-wise, perhaps, but it does work in both output types. Note, however, that I'm not sure how well your generated TOC will handle having a heading tag split across two cells of a table, unless you only use a heading tag for one cell.

[Phlawm53]

Lisa. Thanks! Or more accurately, thanks but RATS! I want it for print but was hoping CSS would be the way to go.

Okay, I*'ll work around the problem for now.

By the by, does Madcap consider the apparent inability to use CSS to style print output to be a bug? If yes, might if have been fixed in V7?

Cheers & thanks 'gain,
Riley

[Paul Griffiths]

Personally, I think Samuel Johnson's dictum applies. Print output of CSS formatting may not always be done well, but one is surprised to find it done at all.

[lacastle]

By the by, does Madcap consider the apparent inability to use CSS to style print output to be a bug? If yes, might if have been fixed in V7?

Yeah, this is a Word problem, not a Flare/CSS problem.

[Phlawm53]

Yeah, this is a Word problem, not a Flare/CSS problem.

Word problems I can live with. How about PDF output, which seems to be working?

Cheers & thanks,
RBV

[lacastle]

One alternate solution would be making a table with the left column left aligned and the right column right aligned. that would work in Word. the only issue is that it would have to be a snippet that you could insert in multiple topics (without having to reformat each time) and couldn't technically be a heading style by itself.

[LTinker68]

I think PDF output supports a lot more of the CSS attributes than Word, but floating content so that they overlap isn't supported, I don't think. Or at least, not when using DIVs to do the floating. If you use an image as a background item then you can have text overlap it, but that's using the background attribute of the paragraph or other tag, not trying to overlap two different tags. However, I haven't done extensive testing of overlapping tags for PDF output, so perhaps there is a way to get it to work if you use a specific set of attribute values.

If the text on the left side or the right side is always the same, then you might be able to get the effect using Flare's auto-numbering feature with a span tag that controls the auto-numbered text. For instance, if you want "Chapter x" to appear on the left and the title of the chapter on the right, then in a heading tag you could set up an auto-numbering scheme where the format inserts the "Chapter x" text but the style of that format is controlled by a span. And again, you'd have to test the effect in both online and print outputs. If you're able to get that setup to work, that would be best, since the generated TOC would recognize the contents of the heading tag better than it would if the heading tag were inside a table.

If the text on the left and the text on the right always vary, then the auto-numbering feature wouldn't work, so you'd have to go with the two-celled table setup.

[wbrisett]

I did exactly this in my PDF output, but it was more trial-and-error rather than an exact science. In fact, I tried to use absolutes, but found that they had no bearing on my output. In the end, I created two classes (one for heading text left aligned, one of heading text right aligned), and creating two floats and manually inserted these into page layout to get things to work out. However, they weren't going exactly where I put them initially, and found that I had to add my indents and margins by trial-and-error to get things right. Now that I have all of that done, I have been able to modify them quite easily, but it is more of an art than science in page layouts from my experience.

The folks at MadCap recommended a table in my heading instead of the floats, but I had issues where borders were randomly appearing in some documents and decided that to ensure my borders were always off, I would simply use the floats instead.

When I get into work, I'll post what I came up with. It doesn't seem as complicated as what you are doing. I simply have two divs and two classes for the left and right aligned text.

Wayne

[Phlawm53]

I eventually got 'round to working on this again (using Flare 8) and found out it's not all that hard. (I think my accumulated experience with Flare and CSS helped, too, though).

The CSS is as follows:

Code: Select all

div.container
{
	margin-bottom: 0.2em;
}

.left
{
	float: left;
}

.right
{
	float: right;
}

.clearBoth
{
	clear: both;
}

The general structure of the XHTML is as follows:

Code: Select all

<div class="container">
           <h2 class="left">Left-aligned heading text</h2>
           <h2 class="right">Right-aligned heading text</h2>
         </div>
        <div class="clearBoth">
         <!-- Content that follows the H2, for example <p> or <ul> -->
        </div>

This works well for PDF, and HTML5 / WebHelp Targets.

For Word Targets, I need to go in and tidy up the headings but Find/Replace-ing the .left / .right tags with basic H2, then re-applying an H2 style that includes a right-aligned TAB, does the trick. (I at this point prefer to do a quick clean-up in Word rather than introduce Word / Non-Word conditional text into the Flare project…)

Also note that one of the things I've learned about online outputs is that IF the output doesn't seem to be obeying CSS changes, THEN use Flare's Project —> Clean Project feature AND clear your browser's / user-agent's cache. I spent quite a bit of time troubleshooting an apparent float / clear problem only to have it "magically" resolve itself when I explicitly got rid of previous outputs and browser cache entries…

Cheers & hope this helps,
Riley
SFO