DITA map PDF – based on HTML5 & CSS transformation

[abacus66]

Hi there!

Today I've tried the "subject". In the resulting PDF the Cyrillic text is "#####" and the font is "PTSans-Regular". I cannot figure out where the default font is set. When I include in custom.css something like

Code: Select all

* {

  font-family: "Times New Roman";

}

all is OK with Cyrillic text but I cannot change the fonts for cover page.

[abacus66]

Another question:

Code: Select all

*[class ~= "front-page/front-page-title"] {

   display: block;

   text-align: right;

   margin-top: 3in;

   font-family: consolas;

   font-size: 3em;

   font-weight: bold;

   color: khaki;

}

@page front-page {

   background-image: url("images/abacus-back.png");

   background-size: 100% 100%;

}

I've got big white rectangle between book title and background. It seems a block (display: block;) has non-transparent background.

[Costin]

Hello,

You should try searching our User-Guide as I'm sure you will find answers to many questions. We tried to document as many use-cases as possible.

For example, the Fonts section from the DITA OT CSS Publishing to PDF User-Guide explains both how to avoid "###" characters in the resulted PDF output and how to change the font in titles and content.
What you need for the cover page is explained in that section:

For example, if you want the titles or the pre-formatted text to have a different font from the rest, matched by the above * selector, you need to use more specific CSS selectors:

Code: Select all

*[class~="front-page/front-page-title"],

*[class~="topic/title"] {

  font-family: Arial !important;

}

Just make sure you use an adequate font, that contains Cyrillic characters.

Best Regards,
Costin

[Costin]

Hello,

Regarding your second post, I could not reproduce the issue using the latest version available (v21) of oXygen.
I tried using a customization CSS that contains only the 2 specific CSS rules you provided, which I used in the DITA Map to PDF - based on HTML5 and CSS scenario applied over the "taskbook.ditamal" from the it-book sample project in oXygen and there is no white rectangle, as you can see from the attached screenshot.

Therefore, this is is most probably the result of a different customization in your own CSS, so you should debug it and eliminate the cause.



Regards,
Costin

[abacus66]

I have only this rule in my custom.css

Code: Select all

@page front-page {

   background-color: navy;

}

And this is what a cover page looks like:

Code: Select all

https://drive.google.com/open?id=1dSJIvB39W7J1xdqgQIdLJlzQTDNq9GpN

[Costin]

Hi,

In your previous posts, you provided some snipets with CSS rules.
Now you say that you have only

Code: Select all

@page front-page {

   background-color: navy;

}

in your custom.css

It is not clear if you have only this rule, or the other rules as well.
Can you clarify?

More than that, the only supported background properties are the ones described in the "Background Images" section from the User-Guide.

Also, what version of oXygen are you using? The latest one (v21)?
Could you try applying the scenario with your customization CSS on the bookamp from the sample project (the one that I used to test - taskbook.ditamap) and see if you still encounter the same issue?

If you still can not debug the customization CSS, you could provide exactly the custom.css file that you are using to us (support@oxygenxml.com) and I will take a look at it and see if I can find the cause.

Regards,
Costin

[abacus66]

Now you say that you have only

Code: Select all

@page front-page {

   background-color: navy;

}

in your custom.css

I've done this for the purity of the experiment But now I think I've found the initial cause of the problem. In the PDF on the title page two artifacts appeared when I accidentally select the "Ashes (tiles)" template.

[abacus66]

In glossentry there is a code

Code: Select all

<glossBody>

   <glossUsage>Something...</glossUsage>

</glossBody>

In output PDF instead of "Usage: " I have "Note: "
In the CSS inspector

Code: Select all

-i18n-en.css:305

*[class~='topic/note']:before {

   content : url(../img/note.svg) " Note: " ;

}

-i18n-en.css:94

*[class~='glossentry/glossUsage']:before {

   content : "Usage: " ; <=== strikethrough

}

How could I change priority?

[Dan]

Hello,
Thank you for the feedback!
Indeed, this is a bug. The "glossary" CSS selectors in the -i18n.css should be after the "note" ones. We will fix this in the new version.

As a workaround, copy the selector in your customization CSS:

Code: Select all

*[class ~= "glossentry/glossUsage"]:before {

    content: "Usage: ";

}

Many regards,
Dan

[abacus66]

As a workaround, copy the selector in your customization CSS:

Code: Select all

*[class ~= "glossentry/glossUsage"]:before {

    content: "Usage: ";

}

I've tried this before I revealed this issue. But I've got: "Usage: Note: ..."

[Dan]

Ok, I see now you are using the HTML5 based transformation.
The fix I gave earlier is for the direct transformation, where the CSS is applied on the merged map.

As a workaround, you can hide the "Note: " label:

Code: Select all

*[class ~= "glossentry/glossUsage"] > .note__title {

  display: none;

}

If you want to show another one add a before pseudo element:

Code: Select all

*[class ~= "glossentry/glossUsage"] :before{

  content: "Usage: ";

}

To make customizations like these, please use the merged HTML file, open it in a browser and use the browsers developer tools to inspect the DOM and create CSS snippets. Please read:
https://www.oxygenxml.com/doc/versions/ ... e_css.html

Many regards,
Dan

[abacus66]

As a workaround, you can hide the "Note: " label:

Code: Select all

*[class ~= "glossentry/glossUsage"] > .note__title {

  display: none;

}

Thanks, it works.

[abacus66]

On the Index page, entry and links are on the deferent lines:

Code: Select all

Local Storage

............................................................. 9

How to make them to be on one line:

Code: Select all

Local Storage................................................ 9

[Costin]

Indeed, the instructions from the User-Guide apply only for the DITA Map PDF based on CSS only.
If you are using the DITA Map PDF - based on HTML5 and CSS, you should try something like:

Code: Select all

*[class~="index/entry"] {

    text-align: justify;

}



*[class~="index/entry"]  *[class~="index/formatted-value"]{

    display: inline;

}



*[class~="index/entry"]  *[class~="index/formatted-value"]:after {

    content:leader('.');

}



*[class~="index/refid"]{

    display:inline;

}

Regards,
Costin

[Radu]

Hi,

We released Oxygen 21.1 which should have a fix for the Note/Usage label you reported.

Regards,
Radu