support text rotation

[shudson310]

We need to be able to rotate certain headers in our tables when @outputclass=”rotated” is specified.

In our xsl:fo, we support this with:

Code: Select all

<xsl:when test="@outputclass='rotated'">

                <fo:block-container reference-orientation="90" inline-progression-dimension="1in">

                   <fo:block xsl:use-attribute-sets="thead.row.entry__content">

                       <xsl:apply-templates select="." mode="ancestor-start-flag"/>

                       <xsl:call-template name="processEntryContent"/>

                       <xsl:apply-templates select="." mode="ancestor-end-flag"/>

                   </fo:block>

                 </fo:block-container>

                </xsl:when>

Please add equivalent support in Chemistry PDF CSS.

[Costin]

Hi Scott,

I already replied to this on the email you sent on our support email address, but I will also paste my reply on this thread.

We only support transform: rotate(90deg); / rotate(-90deg); rules.

However, you could either rotate the whole page containing the table or rotate the table in the page.
For guidance, you should take a look at How to Deal With Wide Tables - Page Rotation and Rotating tables sections from the DCPP / Chemistry User-Guides respectively. Please make sure you pay attention also to the Notes on the indicated User-Guide pages.

Regads,
Costin

[shudson310]

I saw the reply, but this request is to support the text rotation within a header cell, not rotate the entire table. I still haven't been able to get this to work:

Code: Select all

*[class ~= "rotated"] {

  transform: rotate(90deg) !important;

}

[Radu]

Hi Scott,

As a remark you should rotate the text the other way around:

Code: Select all

*[class ~= "rotated"] {

  transform: rotate(-90deg) !important;

}

But somehow indeed this does not work if you mark the "<entry>" with "outputclass='rotate'". We'll try to fix it on our side.
In the meantime if you can add a paragraph in each <entry> that you rotate like:

Code: Select all

<entry outputclass="rotated"><p>aaa</p></entry>

you could re-write your CSS like this:

Code: Select all

*[class ~= "rotated"] > * {

  transform: rotate(-90deg) !important;

}

and this should work.

Regards,
Radu

[shudson310]

Adding the <p> around the table header text and using the style provided works! That said, the table header is not tall enough, so the text overruns. How can I address the table row height?

[shudson310]

To address the height issue, I found a similar post on StackOverflow. I still can't get the text to align at the bottom of the cell now:

Code: Select all

*[outputclass ~= "rotated"] > * {

  display: block;

  transform: rotate(-90deg) translate(-100%) !important;

  text-align: left !important;

  margin-left: 0 !important;

  margin-top: -10%; 

  vertical-align:bottom;

}



tr > *[outputclass ~= "rotated"] {

  padding: 10% 0;

  height: 0;

  vertical-align:bottom;

}

[shudson310]

The padding was the issue. I fixed as follows:

Code: Select all

*[outputclass ~= "rotated"] > * {

  display: block;

  transform: rotate(-90deg) translate(-100%) !important;

  text-align: left !important;

  margin-top: -10%;

  margin-bottom: 0;

  vertical-align:bottom;

  white-space: nowrap;

}



tr > *[outputclass ~= "rotated"] {

  padding-top: 10%;

  height: 0;

  vertical-align:bottom;

  text-align: left !important;

}

[abacus66]

Is it possible to rotate text in the table cell in pdf-css transformation scenario?

[Radu]

Hi,

Yes, as I explain further up in the thread:

post49336.html#p48387

Regards,
Radu

[abacus66]

Hi,

Yes, as I explain further up in the thread:

Thanks, this works somehow. But I cannot figure out how the cell height is calculated. As I understand, code "padding-top: 10%;" is responsible for that. But 10% of what? It does not depend on the cell content.

[Dan]

The recommended way is to set a width and optionally a height to rotated block. Negative paddings or margins should be used as last resort.

If you are using the HTML based transformation try:

Code: Select all

*[outputclass ~= "rotated"] > *[class ~= "topic/p"] {

  display: block;

  transform: rotate(-90deg) !important;

  text-align: left !important;



  padding:0;

  margin:0;

  

  vertical-align:bottom;

  white-space: nowrap;

  background-color:cyan;

  width:50px;

  height:80px;

}



tr > *[outputclass ~= "rotated"] {

    background-color:yellow;

    padding:0;

}

A DITA sample:

Code: Select all

<table frame="all"

                id="simpletable_hfw_z5d_gfb" rowsep="1" colsep="1" >

                <tgroup cols="2" >

                    <colspec colname="c1" colwidth="1*" rowsep="1"/>

                    <colspec colname="c2" colwidth="1*" colsep="1"/>

                    <thead>

                        <row>

                            <entry>Normal</entry>

                            <entry>Normal</entry>

                        </row>

                    </thead>

                    <tbody>

                        <row>

                            <entry outputclass="rotated">

                                <p>Rotated</p>

                            </entry>

                            <entry>Normal</entry>

                        </row>

                        <row>

                            <entry>Normal</entry>

                            <entry>Normal</entry>

                        </row>

                        <row>

                            <entry>Normal</entry>

                            <entry>Normal</entry>

                        </row>

                    </tbody>

                </tgroup>

            </table>

Many regards,
Dan

[julien_lacour]

Hello,

Starting with Oxygen 24.0 it is possible to rotate table cells.
You can either use CSS transform property (together with rotate() function) or directly the built-in DITA @rotate attribute.

Regards,
Julien