PDF-CSS display issues

anna_craneo
Posts: 33
Joined: Tue Feb 20, 2018 2:51 pm

PDF-CSS display issues

Post by anna_craneo » Thu Apr 16, 2020 1:05 am

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
Posts: 102
Joined: Wed Oct 16, 2019 3:47 pm

Re: PDF-CSS display issues

Post by julien_lacour » Thu Apr 16, 2020 5:24 pm

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
Posts: 221
Joined: Thu May 02, 2019 2:32 pm

Re: PDF-CSS display issues

Post by chrispitude » Wed Apr 22, 2020 2:51 pm

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.

Post Reply