sideways text in table header

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

sideways text in table header

be.wood
I am wondering if there is a way to orient the text in a table header to be sideways. I think this may be able to be done in HTML using custom CSS, but it isn't clear to me that this could be done in a PDF using this method and I'm not sure about the YML theme for it.

Basically I have some tables that currently use text in the header that is rotated counter-clockwise 90' (so you would read it from the right side of the page as the bottom) as there needs to be a lot of columns but they are just full of check marks (or X).

Is there some method of using external styles that can be used to achieve this?

Thank you

Brian Wood
Reply | Threaded
Open this post in threaded view
|

Re: sideways text in table header

mojavelinux
Administrator
Brian,

I had looked into this once. I found that although Prawn Table does support rotating text in a cell, it does not compute the height of the cell correctly in this scenario. As a result, the text spills outside of the cell. Until that is fixed, there's no point adding this feature in Asciidoctor PDF.


You might consider exploring asciidoctor-pdf.js as an alternative, which puts the power of CSS when generating PDF back into your hands. See https://github.com/mogztter/asciidoctor-pdf.js (Note that library is still in the experimental phase).

Best,

-Dan

On Thu, Sep 26, 2019 at 2:44 AM be.wood [via Asciidoctor :: Discussion] <[hidden email]> wrote:
I am wondering if there is a way to orient the text in a table header to be sideways. I think this may be able to be done in HTML using custom CSS, but it isn't clear to me that this could be done in a PDF using this method and I'm not sure about the YML theme for it.

Basically I have some tables that currently use text in the header that is rotated counter-clockwise 90' (so you would read it from the right side of the page as the bottom) as there needs to be a lot of columns but they are just full of check marks (or X).

Is there some method of using external styles that can be used to achieve this?

Thank you

Brian Wood


If you reply to this email, your message will be added to the discussion below:
https://discuss.asciidoctor.org/sideways-text-in-table-header-tp7163.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML


--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux
Reply | Threaded
Open this post in threaded view
|

Re: sideways text in table header

be.wood
As a follow-on question to this, I need to create separate table styles in the document. I don't want all the tables to have rotated text in the header, just some of them. I know this can be done in CSS, but what I don't know is how to associate the style I need in the Asciidoctor file itself.

So for example, I want the first table with normal headers, but then a second table with the rotated headers. These would probably be the only styles I would use for the tables, but I'm not sure how to mark one table to use one style class over another.
Reply | Threaded
Open this post in threaded view
|

Re: sideways text in table header

mojavelinux
Administrator
In Asciidoctor, when you add a role to a block, that translates into a CSS class in the HTML output. So you can style different tables differently by assigning roles and using CSS as you normally would.


Best,

-Dan

On Wed, Nov 27, 2019 at 8:48 AM be.wood [via Asciidoctor :: Discussion] <[hidden email]> wrote:
As a follow-on question to this, I need to create separate table styles in the document. I don't want all the tables to have rotated text in the header, just some of them. I know this can be done in CSS, but what I don't know is how to associate the style I need in the Asciidoctor file itself.

So for example, I want the first table with normal headers, but then a second table with the rotated headers. These would probably be the only styles I would use for the tables, but I'm not sure how to mark one table to use one style class over another.


If you reply to this email, your message will be added to the discussion below:
https://discuss.asciidoctor.org/sideways-text-in-table-header-tp7163p7374.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML


--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux
Reply | Threaded
Open this post in threaded view
|

Re: sideways text in table header

be.wood
Thank you. Now I just need to figure out my CSS and I'll be good, but this looks good.


Reply | Threaded
Open this post in threaded view
|

Re: sideways text in table header

harrylee
Hi Brian,

Did you manage to solve this?

I have a similar issue, I can add the CSS styles to do the rotation. However, I need to add a new class to the \<th\> tag, I can't seem to find a way to do this.

Any guidance is appreciated.

Thanks,
Harry
Reply | Threaded
Open this post in threaded view
|

Re: sideways text in table header

be.wood
Harry,

It took me a little while to get back to it, and my CSS knowledge is not great, but this is what I managed to work out. There may be better ways to do this, and it would still need tweaking for any individual table header, though it would be replicated for each table easily enough.

So in the adoc file, I would have something like this (I have bolded the parts I specifically added that are for this, including the leading and trailing ` characters):

.iTC Documentation Templates
[%autowidth]
[cols=".^,.^,.^",options="header"]
|===
.>|File
|[.rotate]`test1`
|[.rotate]`test2`

|README.adoc
|X
|

|TEST.adoc
|
|X

|===

The role then added

<code class="rotate">test1</code>

to the HTML output of the table. To get what I was looking for in the table, I added these two lines to the CSS file (in this case I had been playing with the iconic.css file, though that shouldn't matter here).

Then in the CSS file, I made these adjustments:

On the font-family definition for the "p" class (denoted as the Default Paragraph Styles) I added ", code.rotate". This is so that at least in this case, the header would use the same type of font as the normal one. Of course you could define code.rotate as anything else, but for simplicity to keep all the fonts the same, I added it there.

Add the following line:

code.rotate { width: 20px; height: 100px; white-space: nowrap; transform: rotate(-90deg); border: 0px; display: inline-block; position:relative; left: 40px; bottom: -50px; }

Here is what these meant in my working, so you can adjust to suite your needs:

- width/height - these adjust the box that it will use, which can impact the column width (and how high the text can extent to). Note that if you want the text to not wrap, you need to make sure the height is high enough for the longest line to fit everything

- rotate - in this case I have rotated counter-clockwise so the text reads up (the bottom on the left). This can be adjusted to 90 reading down, but I had more issues making that look right.

- display: inline-block - this seemed to be a key piece to getting it to rotate properly. Most of the articles I could fine online about rotating the content required additional  and <div> markers in the HTML output, and since that would seem to require additional post processing I didn't want to deal with, this inline-block seemed to be the best way to make it work.

- position - I'm not exactly sure about this one, but without it I got things all over the place. I think you could probably make it work without this, but I had it and was able to get it to all line up, so I leave this to people with more knowledge than I have.

- left/bottom - in the end, once the text was rotated and the "box" is set properly, this is how you get the text to line up over the column and as close to the line for the row as you want. Basically you need to adjust this around until you get the text where you want it, and may need to be done individually for each table (I don't know, I have only done this once since it could be easily replicated).

I hope this helps. I am sure there is probably a better way to do this (or at least one that is more complete). I looked at the themes, but that was beyond what I could work on right now, and just adding a few lines to an existing CSS file was definitely doable.

A few things to consider:

- Because the role will add the class under "code", be careful about the font-family. By default the code class uses a different font family so things like actual source code look different. If you change the font family for "code" as opposed to "code.rotate" you could accidentally impact all the places you may have source code or similar displayed in the document

- The left/bottom may be the most tricky to get lined up, and may require unique marking for each table where this is needed. I'm not sure about that since I haven't done it, but in that case I would just create code.rotate1, code.rotate2, etc with adjusted lineups for the tables

- I tested this in Chrome, since the tool that had been recommended used a headless Chrome to produce PDF output (I still haven't gone through that stage yet, but I figure once I have the rotated headers that should be "easier"). If you need Firefox support as you are looking for actual HTML output, I'm not sure what may also need to be done

- To play with the table headings I used the External Preview method discussed here so I could make adjustments to the CSS file and quickly reload the page (since the HTML output shouldn't be changing at that point)

I hope this helps