PDF-CSS issues

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

PDF-CSS issues

Post by anna_craneo » Thu Nov 07, 2019 1:08 am

Hello,

I use PDF-WYSIWYG scenario with CSS, and there are several formatting issues I cannot overcome.

1. I need my table to have borders like this
chrome_2019-11-06_17-59-10.png
chrome_2019-11-06_17-59-10.png (8.9 KiB) Viewed 130 times
but all I could get is this
AcroRd32_2019-11-06_18-00-59.png
AcroRd32_2019-11-06_18-00-59.png (10.61 KiB) Viewed 130 times
The style I use

Code: Select all

*[class~="topic/entry"] {
       
    color: #4c4545;
    text-decoration: none;
    vertical-align: baseline;
    font-size: 11pt;
    font-family: "Open Sans";
    text-align:center;
    border:1pt solid  #5184b0;
       
    }

*[class ~= "topic/table"] > *[class ~= "topic/tgroup"] {
    display: table;

    /* Fixed, in order to be conformant to the DITA specification, if a column does not have a width, it should be considered 1* 
            Prince ignores it. Chemsitry can deal with it. */
    table-layout: fixed;
    width: 650px;

}
*[class ~= "topic/table"] > *[class ~= "topic/title"] {
    display: block;
}

*[class ~= "topic/table"][rowsep = '1'] > *[class ~= "topic/tgroup"] > *[class ~= "topic/thead"] > *[class ~= "topic/row"]:last-child > *[class ~= "topic/entry"],
*[class ~= "topic/tgroup"][rowsep = '1'] > *[class ~= "topic/thead"] > *[class ~= "topic/row"]:last-child > *[class ~= "topic/entry"][rowsep = '1'] {
    border-bottom: none;
    border-right: none;
}

*[class ~= "topic/table"][rowsep = '1'] > *[class ~= "topic/tgroup"] > *[class ~= "topic/thead"] > *[class ~= "topic/row"]:last-child > *[class ~= "topic/entry"],
*[class ~= "topic/tgroup"][rowsep = '1'] > *[class ~= "topic/thead"] > *[class ~= "topic/row"]:first-child > *[class ~= "topic/entry"][rowsep = '1'] {
    border-top: none;
    border-left: none;
}

*[class ~= "topic/table"][rowsep = '1'] > *[class ~= "topic/tgroup"] > *[class ~= "topic/thead"] > *[class ~= "topic/row"]:not(:last-child) > *[class ~= "topic/entry"],
*[class ~= "topic/tgroup"][rowsep = '1'] > *[class ~= "topic/thead"] > *[class ~= "topic/row"]:not(:last-child) > *[class ~= "topic/entry"][rowsep = '1'] {
    border: 1pt solid  #5184b0;
}

*[class ~= "topic/table"][rowsep = '1'] > *[class ~= "topic/tgroup"] > *[class ~= "topic/thead"] > *[class ~= "topic/row"]:not(:first-child) > *[class ~= "topic/entry"],
*[class ~= "topic/tgroup"][rowsep = '1'] > *[class ~= "topic/thead"] > *[class ~= "topic/row"]:not(:first-child) > *[class ~= "topic/entry"][rowsep = '1'] {
    border: 1pt solid  #5184b0;
}

2. I need to add additional text to the cover page, I try to do it like this but the text is not displayed

Code: Select all

    *[class~="front-page/front-page"] {
        page: front-page;
    }
    
    
    *[class ~= "front-page/front-page-title"]:after(1) {
    
    content: "January 1, 2019";
    
}
3. Is there any way to make bullets (li element) larger? Without increasing the text size in the bullet itself.

Dan
Posts: 428
Joined: Mon Feb 03, 2003 10:56 am

Re: PDF-CSS issues

Post by Dan » Fri Nov 08, 2019 4:52 pm

For the point 3, please take a look at:
https://www.oxygenxml.com/doc/versions/ ... f4_np5_cbb
It explains how to use the :marker pseudo-class.

For the others, I will come back with details.

Many regards,
Dan

Dan
Posts: 428
Joined: Mon Feb 03, 2003 10:56 am

Re: PDF-CSS issues

Post by Dan » Fri Nov 08, 2019 4:55 pm

For point 2, I used just the selector:

*[class ~= "front-page/front-page-title"]:after(1) {
content: "January 1, 2019";
}

And it worked fine. The page is already defined for the front-page, so just use the :after selector.
See also: https://www.oxygenxml.com/doc/versions/ ... aid-title6

Dan
Posts: 428
Joined: Mon Feb 03, 2003 10:56 am

Re: PDF-CSS issues

Post by Dan » Fri Nov 08, 2019 4:56 pm

For point 1 could you post a snippet with the exact XML structure of your table? I noticed you have used rowsep and colsep attributes in your CSS.

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

Re: PDF-CSS issues

Post by anna_craneo » Mon Nov 11, 2019 8:10 pm

Hi Dan,

Thanks for your answers.

1. Here is the snippet

Code: Select all

<table colsep="0" frame="none" id="table_csg_5dy_tcb">
                <title>Apps</title>
                <tgroup align="left" cols="2">
                    <colspec colname="c1" colnum="1" colwidth="1*" rowheader="headers"/>
                    <colspec colname="c2" colnum="2" colwidth="2.72*" rowheader="headers"/>
                    <thead>
                        <row valign="top" rowsep="0">
                            <entry>App Type</entry>
                            <entry>Updated</entry>
                        </row>
                    </thead>
                    <tbody>
                        <row valign="top" rowsep="0">
                            <entry>Scenario</entry>
                            <entry>1</entry>
                        </row>
                        <row valign="top" rowsep="0">
                            <entry>Report</entry>
                            <entry>3</entry>
                        </row>
                    </tbody>
                </tgroup>
            </table>
2. This does not work for me. Even if I remove this

Code: Select all

*[class~="front-page/front-page"] {
        page: front-page;
    }
What else could I do?

3. Yeah, I've read this article, it works with everything except for what I need - bullet size. After all I just inserted necessary bullets as images but the quality is fat from perfect even if I use SVG. :(

Post Reply