H&M4 and 'white-space: nowrap'

[Ascension]

Is there a way to prevent H&M4 from generating the white-space property and under what conditions is this property generated? I have defined my own style called 'tpslink' ('nowrap' does not appear in the definition). If I do too much text formatting (not sure what causes it) H&M4 generates code such as the following:

<p style="white-space: nowrap;"><span class="f_tpslink">Emergency Medicine</span></p>

I would prefer the following:

<p><span class="f_tpslink">Emergency Medicine</span></p>

I am trying to design my own topic pages and wish to use CSS to do the formatting. I am finding that the "white-space:nowrap" property seems to be causing problems(I use IE6). At least, I assume that is the case, since replacing the former statement with the latter seems to solve my problems. Is there a way to avoid the former and generate the latter?

[Tim Green]

Is there a way to prevent H&M4 from generating the white-space property and under what conditions is this property generated? I have defined my own style called 'tpslink' ('nowrap' does not appear in the definition).

Actually, you will probably find that you have defined the nowrap property, either manually or in your style definition. This is generated when you deselect the "Word wrap" attribute in the Line and Page Breaks tab of the paragraph properties definitions.

For example, as a demonstration I just defined two sub-versions of Normal, one with wrap turned off and one with wrap turned on. Here is what you get in the output code as a result:

Wrap turned off:

Code: Select all

<p class="p_NormalNowrap" style="white-space: nowrap;"><span class="f_NormalNowrap">

Wrap turned on:

Code: Select all

<p class="p_NormalWrap"><span class="f_NormalWrap">

What is probably a minor bug here is the inclusion of the style="white-space: nowrap;" attribute in the paragraph tag even though this is actually a CSS style. Since the nowrap attribute is in the style definition I don't think it should appear here, it should be included in the style. We'll have to see what Alex says about this when he reads this thread, but I'm pretty sure it's wrong. For example, the definition of my demo style from above looks like this in the CSS file:

Code: Select all

.p_NormalNowrap /* Normal Nowrap */
{
 white-space: nowrap;
}

This means that nowrap is being set twice, once via the CSS stylesheet and once via the STYLE attribute in the text.

I would prefer the following:
<p><span class="f_tpslink">Emergency Medicine</span></p>

This isn't possible in this form because for technical reasons H&M always uses two style definitions for each paragraph, one for the paragraph attributes and one for the font attibutes. The p_ prefix style is the para style, the f_ prefix style is the font style. This structure is essential on many levels and it cannot be changed.

I am trying to design my own topic pages and wish to use CSS to do the formatting.

I assume you are editing the CSS stylesheet output by H&M. This shouldn't be a problem provided you keep font and paragraph attributes separate in the separate styles. As noted above, we'll have to see what Alex says about the "manual" attribute for nowrap turning up in the CSS-formatted paragraph.

I am finding that the "white-space:nowrap" property seems to be causing problems(I use IE6). At least, I assume that is the case, since replacing the former statement with the latter seems to solve my problems. Is there a way to avoid the former and generate the latter?

What problems are you experiencing?

[Ascension]

Thanks very much for your response. The problem I have found is that when there is a 'white-space: nowrap' statement in either the default.css or generated inline on the topic page the background of a paragraph does not remain intact (retain its square shape) when the browser is resized horizontally. Let me explain what I have observed:

1. I type a few lines on a new topic page:

Now is the time
for all good men to
come to the aid of their party

2. I define a new style (tplist) with 'word wrap' turned on so there are no 'white-space: nowrap' statements in either the default.css or on the generated topic page after generating browser based ouput. I now go into the default.css and add the following statements.

.p_tplist /* tplist */
{
position: relative;
top: 10px;
left: 0;
width: 40%;
padding: 10px;
background: #999;
}

When accessing the topic page in my browser I have a nice background surrounding my text and the square shape of that background stays intact when the browser is resized horizontally.

3. Now I redefine my style (tplist) with 'word wrap' turned off. I get the following statement on the generated topic page:

<p class="p_tplist" style="white-space: nowrap;"><span class="f_tplist">Now is the time</span></p>

and the following in the default.css:

.p_tplist /* tplist */
{
white-space: nowrap;
}

As you noted, I'm not sure why it needs to be set in both places. Seems reasonable to make the change in the default.css rather than on the topic page if at all possible.

4. Now the problem. If I reapply the statements in #2 above to the default.css as follows the shaded background no longer retains its square shape when the browser is resized horizontally. This remains true as long as the 'white-space: nowrap' statement remains in either the default.css, on the generated page, or both.

.p_tplist /* tplist */
{
position: relative;
top: 10px;
left: 0;
width: 40%;
padding: 10px;
background: #999;
white-space: nowrap;
}

I have not tried this in any browser other than IE6 so I don't know if the same applies to other browsers.

By the way I found the 'word wrap' check box after my first post.