DITA: Make Oxygen's webhelp output a fixed width
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>
Special shoutout to CSS Tricks for this tip on wrapping content inside the pre
tag.
About Tom Johnson

I'm a technical writer / API doc specialist based in the Seattle area. In this blog, I write about topics related to technical writing and communication — such as software documentation, API documentation, visual communication, information architecture, writing techniques, plain language, tech comm careers, and more. Check out my API documentation if you're looking for more info about that. If you're a technical writer and want to keep on top of the latest trends in the field, be sure to subscribe to email updates below. You can also learn more about me or contact me. Finally, note that the opinions I express on my blog are my own points of view, not that of my employer.