PDF-CSS display issues

[anna_craneo]

Hi, I'm currently adapting our PDF documentation for new template and I have several display issues (I use PDF-WYSIWYG transformation scenario)

ISSUE 1
I need to add background color for front page's title and for all H1 headers that must look like this (only create the background for actual words, not the entire line)
https://imgur.com/MGABqsd

but I get this result for front page
https://imgur.com/8XKBEFK
style

Code: Select all

*[class ~= "front-page/front-page-title"] {
    font-size: 36pt;
    color: #00243e;
    font-weight: 700 !important;
    text-align: left;
    font-family: "Source Code Pro", serif;
    line-height: 1.5;
    text-transform: uppercase;
    background-color: #00ffff;
    display: inline;
    margin-top: 1000px !important;
    padding-top: 300px !important;
}

and this result for headers
https://imgur.com/y1RKcX5

Style

Code: Select all

*[class ~= "topic/topic"] > *[class ~= "topic/title"] {
    color: #00243e;
    background-color: #00ffff;
    font-size: 20pt;
    font-family: "Source Code Pro";
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
    text-decoration:none !important;
    border-bottom-width:0px;
    text-transform: uppercase;
}

ISSUE 2
I want to get this style of divider for TOC
https://imgur.com/H183xlv

But actual divider has bigger "strokes".
https://imgur.com/ntqFmYD

Which property can I use to make it smaller?


ISSUE 3
I have a nested glossary under the Glossary topic and seems like it generates extra indentation for the TOC's last elements (I tested with the map removed from the structure and the indent goes away). Could you advise on how I can properly eliminate this?
https://imgur.com/ntqFmYD

Thanks a lot for your help!

[julien_lacour]

Hello Anna,

On the most recent versions of Oxygen you can try the DITA Map PDF - based on HTML5 & CSS transformation, as it used an intermediary HTML5 it is easier to see how the CSS is applied (using your favorite browser).

If you must use the WYSIWYG transformation, could you please send us your CSS customization at support@oxygenxml.com and a small sample? (containing your ditamap and some topics where the problem occurs)
We will locate the problem faster like this and resolve it. If your topics contains some private information, you can just replace it (using for example https://www.lipsum.com/, only the structure matters in this case).

Regards,
Julien

[chrispitude]

We have been extremely successful with the "DITA Map PDF - based on HTML5 & CSS" transformation.

By editing the CSS file then refreshing your browser displaying the intermediate HTML5 file, you can see the results of your adjustments almost instantly. You can also use the powerful CSS inspector/debug capabilities of your browser to see in-depth information about fonts, margins, property inheritance, and many other things. And finally, you can leverage the same CSS code to format both the DITA editing window as well as the output PDF.