I'm not a fan of liquid layouts, so I made some adjustments to make the OxygenXML webhelp output a fixed width.
<code>.conbody,
.taskbody,
.refbody,
.body,
p.shortdesc,
.title,
.ullinks,
.glossdef
{
max-width:800px;
}
</code>
Some of those other elements, such as title
and p.shortdesc
, appear before the body
. They don't seem to be contained within anything, though I could have overlooked something.
I also apply a max-width
property to images:
<code>.conbody img,
.taskbody img,
.refbody img{
max-width:600px;
}
</code>
Note also that when you apply a fixed width to your content, the code in your code block
elements may get cut off. Since codeblock
elements are contained within stepxmp
and info
, which are contained within step
, you can't really get around their parent containers.
Instead, to handle code block
content from getting cut off, you can add this:
<code> .codeblock {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</code>
Sponsored content
Special shoutout to CSS Tricks for this tip on wrapping content inside the pre
tag.