Advanced Styling

Hyphenation

The CSS hyphens property specifies how the words should be hyphenated when the paragraph text wraps on multiple lines.

The accepted values are:

manual

Words are only hyphenated when there are characters inside the word that explicitly suggest hyphenation opportunities. Those characters are:

U+2010 (HYPHEN) -: The "hard" hyphen character indicates a visible line break opportunity. The hyphen is always shown in the output.
U+00AD (SHY): An invisible, "soft" hyphen. This character is not rendered visibly. It marks a breaking place for the word if hyphenation is necessary. You can use  in XML or  in HTML.

auto

Words are hyphenated automatically according to an algorithm driven by a hyphenation dictionary. Also, Oxygen PDF Chemistry uses an aggressive technique to create hyphenation points at underscores, dots, and case changes. This is useful when your publication contains snippets of code (Java, etc). To disable this functionality, you can use the -no-aggressive-hyphenation parameter.

Note: The element, or one of its parents, must have a lang or xml:lang attribute present for the processor to identify the hyphenation dictionary. If this is missing, the manual hyphenation is performed.

<table lang="en">
...
</table>

none

Currently not supported by Oxygen PDF Chemistry and it falls back to manual. If your document does not use the HYPHEN or SHY characters, no hyphenation is done.

Example: Hyphenation

To perform hyphenation on all paragraphs from an HTML document, you can use:

p {
  hyphens: auto;
}

Usually, it is best to activate hyphenation for elements that are known to have a limited width (for example, on tables) where long words could bleed out of the bounds:

table {
  hyphens: auto;
}

Hyphenation Dictionaries

Oxygen PDF Chemistry provides built-in hyphenation patterns for the following languages:

Code	Language
da	Danish
de	German
de_CH	German (Switzerland)
en	English
en-GB	English (Great Britain)
es	Spanish
fr	French
it	Italian
nb	Norwegian Bokmål
nl	Dutch
ro	Romanian
ru	Russian
sv	Swedish
th	Thai
pt	Portuguese
da	Danish

The built-in hyphenation pattern license terms are listed in the XML files in the [CHEMISTRY_INSTALL_DIR]/config/hyph folder. Most of them comply with the LaTex distribution policy.

Installing New Hyphenation Dictionaries

The hyphenation dictionaries are located in: [CHEMISTRY_INSTALL_DIR]/config/hyph. The .xml files allow you to read the licensing terms. The .hyp files are the compiled dictionaries that Oxygen PDF Chemistry actually uses.

Oxygen PDF Chemistry uses the TeX hyphenation dictionaries converted to XML by the OFFO project: https://sourceforge.net/projects/offo/.

One simple way to add more dictionaries:

Download and extract the offo-hyphenation-compiled.zip file.
Copy the fop-hyph.jar file to the [CHEMISTRY_INSTALL_DIR]/lib directory.
If you just need a single dictionary, extract the corresponding .hyp file from that jar file and place it in the [CHEMISTRY_INSTALL_DIR]config/hyph directory.

How to Hide Hyphens

It is possible to hide hyphens for cases where they are not needed (for example, when hyphenation occurs in a section of code). To hide the hyphens, use the space character in the -oxy-hyphenation-character property:

pre {
 -oxy-hyphenation-character:" ";
}

Using XPath in CSS

You can collect and process the document contents using XPath, directly from CSS. The following example counts the words from a section and shows it in a static text after the section:

section:after {
  contents: "Number of words: " 
            oxy_xpath("count(tokenize(normalize-space(string-join(text(), '')), ' '))";
}

All the standard XPath 2.0 functions are supported.

Multiple :before and :after Pseudo Elements

Although not standard, this extension may come in very handy if you want to style sections from static content. To add static content to an element, you would normally use a :before or :after pseudo element.

This example adds static text before the title ("Chapter 1", "Chapter 2", etc.):

h1:before {
  content: "Chapter " counter(chapter) ".";
  color: blue;
}

All of this is styled with the same color, blue in this example. Using standard CSS, it is impossible to style just the chapter number with a larger font and with red, for example. However, you can do it using multiple before pseudo elements:

h1:before(3) {
  content: "Chapter ";
  color: blue;
}
h1:before(2) {
  content: counter(chapter);
  color: red;
  font-size: large;
}
h1:before(1) {
  content: ".";
  color: blue;
}

Note: The bigger the level, the more distant the pseudo element is.

Note: Level 1 corresponds to normal :before or :after.