space after autonumbered paragraph dependent on # of lines

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
bonnie
Sr. Propeller Head
Posts: 158
Joined: Wed May 14, 2008 4:00 pm

space after autonumbered paragraph dependent on # of lines

Post by bonnie »

I am using autonumbered paragraphs that have a margin-bottom=0.5em. I am using this paragraph format to list procedure steps. I noticed that in the WebHelp some of these paragraphs had more space after them than others (even though all the paragraphs had the same paragraph class applied) and I could not figure out why. Then I realized that the difference was the number of lines in the paragraph!! A single-line paragraph had more space after it than a multi-line paragraph. And since the number of lines in a paragraph is dependent on the width of the browser window, I can narrow the browser window until a single-line paragraph becomes a multi-line paragraph, at which point the spacing following the paragraph also changes.

I want the spacing to be the same for single-line paragraphs and multi-line paragraphs.

Can anyone suggest what is causing this behavior?
Thanks,
Bonnie
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: space after autonumbered paragraph dependent on # of lines

Post by LTinker68 »

I don't think that's really what's happening. You could have some extra, non-breaking spaces at the end of some lines, or the content following the line item has its own margin- or padding-top property which combines with the last line item's margin-bottom to give the impression of extra space between them.

Also - and I think this is what's most likely happening - even though you don't see the tags in the output, the browser still seems them and still counts them somewhat when it adjusts positioning in the browser. So it could be that the end tag of a multi-line paragraph falls in the middle of the paragraph horizontally, but for single-line paragraphs they're actually wrapping down to the next line in the browser, even though to you it looks like the paragraph ends at the very end of the previous line. If you see a single line that has a lot of extra space after it, and you widen the browser window a little bit at a time, do you see the spacing decrease? If so, that's when the end tag is back on the same line as the text.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
bonnie
Sr. Propeller Head
Posts: 158
Joined: Wed May 14, 2008 4:00 pm

Re: space after autonumbered paragraph dependent on # of lines

Post by bonnie »

You could have some extra, non-breaking spaces at the end of some lines, or the content following the line item has its own margin- or padding-top property which combines with the last line item's margin-bottom to give the impression of extra space between them.
That's what I first suspected, too, but I printed out the file from my text editor and checked all this out before I reported this. I have no extra non-breaking spaces at the end of lines. And the following paragraphs have no extra top-margin or top-padding.
it could be that the end tag of a multi-line paragraph falls in the middle of the paragraph horizontally, but for single-line paragraphs they're actually wrapping down to the next line in the browser, even though to you it looks like the paragraph ends at the very end of the previous line.
I also checked this out in the text editor. There are no end tags in the middle of the paragraph.

As I narrow the browser window, as soon as the single line breaks into two lines (when just even one word drops down to the second line), the spacing decreases (compare window_1 example with window_2 example below).
That's why this is such a mystery.

Bonnie
You do not have the required permissions to view the files attached to this post.
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: space after autonumbered paragraph dependent on # of lines

Post by LTinker68 »

How are the second paragraphs in steps 1, 2, 3, 4, and 8 entered? Did you just do a couple of line breaks (<br />) or did you insert a paragraph inside the line item? And did you insert a second-level list in step 3, or did you create a second list, indent it more than the first, and then had step 4 start as a new list with the option to continue from the first list?

Could you post your stylesheet settings for the lists you're using and the source code for the topic containing the lists? That way we can see if it's something in the stylesheet or something in the topic.

That said, I don't use auto-numbers much, but I don't recall anyone else mentioning this type of issue in the forums before, so it's most likely conflicting styles in the stylesheet, inline styles, or order/type of tags in the topic.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
bonnie
Sr. Propeller Head
Posts: 158
Joined: Wed May 14, 2008 4:00 pm

Re: space after autonumbered paragraph dependent on # of lines

Post by bonnie »

How are the second paragraphs in steps 1, 2, 3, 4, and 8 entered?
The paragraphs following the auto-numbered paragraphs are assigned a separate non-numbered paragraph class (each paragraph has the same tag). I've shown the code I used below:
p.step_1 is assigned to step 1.
p.step_2 is assigned to all the other steps.
p.step_1_indent is assigned to all the indented paragraphs.

Code: Select all

p.step_1
{
	margin: 0;
	orphans: 5;
	widows: 5;
	margin-bottom: 0.5em;
	mc-auto-number-class: step_number;
	mc-auto-number-position: outside-head;
	mc-auto-number-format: 'A:{n=1}.  ';
	margin-left: 36px;
	margin-right: 36px;
	font-size: 82%;
	mc-auto-number-offset: 20px;
	display: block;
	vertical-align: baseline;
}

p.step_2
{
	margin: 0;
	orphans: 5;
	widows: 5;
	margin-bottom: 0.5em;
	mc-auto-number-class: step_number;
	mc-auto-number-position: outside-head;
	margin-left: 36px;
	margin-right: 36px;
	mc-auto-number-offset: 20px;
	mc-auto-number-format: 'A:{n+}.  ';
	font-size: 82%;
	vertical-align: baseline;
}

p.step_1_indent
{
	margin-left: 36px;
	margin-right: 36px;
}

span.step_number
{
	font-weight: bold;
	line-height: 1.25em;
	font-family: Verdana;
	font-size: 100%;
}
The topic code follows:

Code: Select all

  <h2 class="Notes">Task 3:  Adding Overlays to an Image</h2>
        <p class="Normal">Once you have an image loaded, you can add overlays to it.  The types of overlays TeraVision can generate for you include geopolitical boundaries, latitude/longitude grids, and topography/bathymetry contours.  You can add these overlays in two ways--using buttons on the toolbar, and using the same buttons on the <span class="Emphasis">Layers</span> panel.  This task shows you how to work with these overlays using both methods.</p>
        <p class="step_1" MadCap:autonum="1.  ">Click on the <span class="Emphasis">Coast Overlay</span> button <img src="../Resources/Images/over_boundaries_icon.gif" /> <![CDATA[ ]]><span class="_Override" style="text-decoration: underline;">on the toolbar</span>.</p>
        <p class="step_1_indent">Geopolitical boundaries will be added to your image.  Default features are displayed for the overlay.  Therefore, you may wish to modify certain features of this new overlay as follows.</p>
        <p class="step_2" MadCap:autonum="2.  ">Select <span class="Emphasis">Layers</span> from the <span class="Emphasis">Tools</span> menu.</p>
        <p class="step_1_indent">The name of the image and its data type and the overlay you added will be listed in the <span class="Emphasis">Active Layers</span> list.</p>
        <p class="step_2" MadCap:autonum="3.  ">Click on the name of the overlay (BOUNDARY) in the list of <span class="Emphasis">Active Layers,</span> then click on the <span class="Emphasis">Edit</span> action button (or, double-click on the overlay name).</p>
        <p class="step_1_indent">A dialog box called the <span class="Emphasis">Boundaries Context Editor</span> will appear.</p>
        <p class="step_a" MadCap:autonum="a.">In the <span class="Emphasis">Digital Chart of the World</span> section, turn on the <span class="Emphasis">Inland Water</span> toggle button.</p>
        <p class="step_b" MadCap:autonum="b.">Turn off any <span class="Emphasis">World Data Base II</span> selections.</p>
        <p class="step_b" MadCap:autonum="c.">Select a new boundary color from the <span class="Emphasis">Overlay Color</span> options drawer.  Select a line style from the <span class="Emphasis">Line Style</span> options drawer, and select a line width from the <span class="Emphasis">Line Width</span> options drawer.</p>
        <p class="step_b" MadCap:autonum="d.">If you want to save the changes you made as the new default settings, click on the checkmark button in the upper-right corner of the editor.</p>
        <p class="step_b" MadCap:autonum="e.">Click on the <span class="Emphasis">Accept</span> button.</p>
        <p class="step_a_indent">The existing BOUNDARY overlay will be redrawn as you specified in the <span class="Emphasis">Boundaries Context Editor</span>.</p>
        <p class="step_2" MadCap:autonum="4.  ">Click on the <span class="Emphasis">Add Grid</span> button <img src="../Resources/Images/over_grids_icon.gif" /> on the <span class="Emphasis">Layers</span> panel.</p>
        <p class="step_1_indent">A dialog box called the <span class="Emphasis">Grids Context Editor</span> will appear.</p>
        <p class="step_2" MadCap:autonum="5.  ">Turn on the <span class="Emphasis">Draw Labels</span> toggle button if it is not already on.</p>
        <p class="step_2" MadCap:autonum="6.  ">From the <span class="Emphasis">Grid Spacing</span> options drawers, select <span class="Emphasis">3</span> for the <span class="Emphasis">Latitude</span> and <span class="Emphasis">3</span> for the <span class="Emphasis">Longitude</span>.</p>
        <p class="step_2" MadCap:autonum="7.  ">Select a color from the <span class="Emphasis">Overlay Color</span> options drawer.</p>
        <p class="step_2" MadCap:autonum="8.  ">Click on the <span class="Emphasis">Accept</span> button.</p>
        <p class="step_1_indent">Labeled latitude/longitude gridlines at 3-degree intervals will be added to your image and an overlay called LAT LON GRID will be added to the list of <span class="Emphasis">Active Layers</span>.</p>
        <h2 class="Notes">Notes:</h2>
        <p class="Normal">When you click on <span class="Emphasis">Zoom In</span>, <span class="Emphasis">Zoom Box</span>, and <span class="Emphasis">Pan</span>, that mode remains enabled until you turn it off - anytime you click in the image, the results will be the current mode.</p>
        <p class="Normal"><span class="Emphasis">Zoom Out</span>, <span class="Emphasis">Reset Zoom</span> and <span class="Emphasis">Rotate</span> are one-time-only.  You must click on the button again to apply that function.</p>
        <p class="Normal">TeraVision subsamples pixels to fit the screen.  Depending on the size of the original image, when you zoom in TeraVision will retrieve additional pixels from the data loaded in memory until it reaches full resolution.  After that, there is no more data to add, so the more you zoom, the larger the screen pixel becomes.</p>
        <p class="Normal">Each time you zoom in, you zoom by a factor of the square root of 2.  In other words, if you zoom in twice it is zoomed by a factor of 2. Thus, an area which was originally 1 inch by 1 inch will now be 2 x 2.</p>
        <p class="Normal">  </p>
I tried to attach the topic file and the entire stylesheet that I'm using, but when I do that I get the messages: the extension .htm is not allowed, and the extension .css is not allowed. So, then I tried submitting them both as text files, and got the message the extension.txt is not allowed. So how do I submit them?

Thanks for your help.
Bonnie
Last edited by bonnie on Wed Aug 13, 2008 12:16 pm, edited 1 time in total.
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: space after autonumbered paragraph dependent on # of lines

Post by LTinker68 »

Just copy-and-paste the source code into the forum like you did the relevant stylesheet code. Open the topic using the Internal Text Editor (or Notepad) and copy all the code for the steps (you don't need to include the rest of the topic, just the code for the procedural steps).
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
bonnie
Sr. Propeller Head
Posts: 158
Joined: Wed May 14, 2008 4:00 pm

Re: space after autonumbered paragraph dependent on # of lines

Post by bonnie »

Just copy-and-paste the source code into the forum like you did the relevant stylesheet code.
I edited my previous post to add the topic code.
Bonnie
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: space after autonumbered paragraph dependent on # of lines

Post by LTinker68 »

What are the style parameters for the "Normal" paragraph class (<p class="Normal">)?
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
bonnie
Sr. Propeller Head
Posts: 158
Joined: Wed May 14, 2008 4:00 pm

Re: space after autonumbered paragraph dependent on # of lines

Post by bonnie »

What are the style parameters for the "Normal" paragraph class (<p class="Normal">)

Code: Select all

p.Normal
{
	text-align: left;
	color: #000000;
	margin-bottom: 0.5em;
	orphans: 5;
	widows: 5;
}
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: space after autonumbered paragraph dependent on # of lines

Post by LTinker68 »

Ok, I figured it out, and I learned something new in the process.

The problem is the widow and orphan values you specified in the p.Normal, p.step_1, and p.step_2 styles. I assumed those properties didn't have any effect on online output and they'd just be ignored, but apparently they do have some affect.

So, open the stylesheet in the Stylesheet Editor. Set the medium to "default". For those three classes mentioned above, set the widow and orphan values to default (not set). Change the stylesheet medium to "print". Go back to those three classes and set the widow and orphan controls to 5. Save the stylesheet. The widow and orphan values will now only be applied when you generate printed output.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
bonnie
Sr. Propeller Head
Posts: 158
Joined: Wed May 14, 2008 4:00 pm

Re: space after autonumbered paragraph dependent on # of lines

Post by bonnie »

You're right, Lisa. What you suggested fixed the problem for me. Who would have thought it?
Thanks very much for figuring that out.
Bonnie
KevinDAmery
Propellus Maximus
Posts: 1985
Joined: Tue Jan 23, 2007 8:18 am
Location: Darn, I knew I was around here somewhere...

Re: space after autonumbered paragraph dependent on # of lines

Post by KevinDAmery »

bonnie wrote:Who would have thought it?
Not me - heck, I still don't understand *why* it works even now... :shock:
Until next time....
Image
Kevin Amery
Certified MAD for Flare
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: space after autonumbered paragraph dependent on # of lines

Post by LTinker68 »

It kinda sorta makes sense, especially if content is being pulled from a database or other storage medium and is being put in a page dynamically -- if widows and orphans work, then it may affect how long content is split between pages with "next" and "previous" buttons. Maybe having options like that keep paragraphs from being split in the middle.

Totally guessing here.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
KevinDAmery
Propellus Maximus
Posts: 1985
Joined: Tue Jan 23, 2007 8:18 am
Location: Darn, I knew I was around here somewhere...

Re: space after autonumbered paragraph dependent on # of lines

Post by KevinDAmery »

I can understand it affecting where line breaks are, but not the spacing between paragraphs. Sounds like a bug to me - just not sure if it's in Flare, the browsers, or the HTML spec :?
Until next time....
Image
Kevin Amery
Certified MAD for Flare
Post Reply