Search results

DITA: Make Oxygen's webhelp output a fixed width

You can change the liquid layouts to fixed layouts in Oxygen's webhelp output.

I'm not a fan of liquid layouts, so I made some adjustments to make the OxygenXML webhelp output a fixed width.


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{

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+ */

Special shoutout to CSS Tricks for this tip on wrapping content inside the pre tag.

About Tom Johnson

Tom Johnson

I'm an API technical writer based in the Seattle area. On this blog, I write about topics related to technical writing and communication — such as software documentation, API documentation, AI, information architecture, content strategy, writing processes, plain language, tech comm careers, and more. Check out my API documentation course if you're looking for more info about documenting APIs. Or see my posts on AI and AI course section for more on the latest in AI and tech comm.

If you're a technical writer and want to keep on top of the latest trends in the tech comm, 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.