---
title: "DITA: Make Oxygen’s webhelp output a fixed width"
date: 2014-12-27
description: "{% include notes.html %} I'm not a fan of liquid layouts, so I made some adjustments to make the OxygenXML webhelp output a fixed width. {% highlight..."
canonical_url: https://idratherbewriting.com/fixed_width_oxygen/index.html
---

> For AI agents: a documentation index is available at https://idratherbewriting.com/llms.txt. Markdown versions of all pages are available by appending .md to any page URL.

# 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.

```xml
<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:

```xml
<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:

```xml
<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](https://css-tricks.com/snippets/css/make-pre-text-wrap/) for this tip on wrapping content inside the `pre` tag.

**Collected links**

[CSS Tricks](https://css-tricks.com/snippets/css/make-pre-text-wrap/)