Posted by be.wood on
URL: https://discuss.asciidoctor.org/sideways-text-in-table-header-tp7163p7434.html

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