Request: Easy way to set CSS for table cells, such as Kramdown Inline Attribute Lists

[brigitte-youitv]

It would be really awesome if there was a way to tag table cell content to tell it to use a certain CSS class for formatting. For example, to do things like set the cell background and/or colour/font/font-size, etc. This is something I can do outside tables with a IAL tags (described here https://kramdown.gettalong.org/syntax.html#block-ials), for example.

When I tried it with IAL tags (code below), I see that {: th} text in the output. So it's like it's failing to be parsed a-la Kramdown. I'm not hugely surprised by this because Kramdown doesn't support it in the tables either.

I tried a couple other ideas as well such as setting an HTML span inline, but I couldn't accomplish my goal. What I'm trying to do is have a header "column" for a table that has merged column cells.

| ---                             | ---                        | ---    |
| my merged cell  {: .th}         | o                          | row 1 content |
| ^^                              | Shift + o                  | row 2 content |
| ^^                              | Alt + o                    | row 3 content |

Results:

Note that when you look at the HTML for the resulting table, the first column of the first row has my merged cell. The first column of the second and third row are Shift+o and Alt+o, respectively. This means I can't just use CSS to target the first column of my table. Because I'd get shading on the middle column in rows 2 and 3. (Hopefully that makes sense.)

I hope you don't mind the feature request. I wish I had the Ruby skills to help you out with a PR.

Keep up the great work on this project!

[jeffreytse]

Hi @brigitte-youitv ,

🎉 Thanks for your suggestions and the IALs is a really awesome feature. The latest gem version v0.8.6 has been released and the IALs is totally supported.

Thanks with regards.

[brigitte-youitv]

Thanks so much @jeffreytse. I downloaded the update and tested it with a sass-defined css class with great success.

I wasn't able to get the other IAL types working (I'm not sure I did it 100% right). I'd never used those type before, so maybe I am using them wrong. I don't plan to dig in too much more right now since you totally satisfied my initial request!

Appreciate the amazing work. I'm not sure if you want me to close this - but I will and you can re-open if that wasn't your plan.

[jeffreytse]

Hi @brigitte-youitv

I have added a section about how to use IALs in table cells to README.md.
You can click here to get a glance. And If you have any question, welcome to issue here.

Thanks with regards.

[brigitte-youitv]

Thanks! When I tried it, I copied/pasted the text from the sample into my project. Are you supposed to be able to define the styles inline like that, above the table? It didn't seem to work for me.

I found another little issue with the tables, so I'm going to build a new sample tonight that's outside my project to see if I can reproduce it. I'll try the IAL stuff then too.

[jeffreytse]

Hi @brigitte-youitv

Has this issue be settled about IALs not working? I just tried and it was working on my computer environment.

Thanks with regards.

[brigitte-youitv]

Thanks for the push to get me to look at this again. I'm editing my previous reply, because I believe I found the issue. Unfortunately I don't have a full project ready for you this time - but I will show you the details of what I'm doing.

[brigitte-youitv]

The problem stems from collection folders with a . in the path. I have collections that include a revision number, so they look like _ver1.2. This dot in the path causes the issue.

Here is my _config.yml:

#Site Settings
locale                      : "en-CA"

# Build settings
theme: minima
plugins:
  - jekyll-spaceship
plugins_dir: ./_plugins

jekyll-spaceship:
  processors:
    - table-processor

collections_dir: docs

collections:
  ver.1:
    output: true
    permalink: /ver.1/:path/     # Both the folder and the permalink have a .
  ver2:
    output: true
    permalink: /ver2/:path/     # Neither the folder nor the permalink has a .
  ver2.1:
    output: true
    permalink: /ver21/:path/     # Folder has a ., permalink does not
  ver22:
    output: true
    permalink: /ver2.2/:path/    # Permalink has a ., folder does not

And here is the folder structure that matches this:

$ ls -R docs
_ver.1/     _ver2/      _ver2.1/    _ver22/

docs/_ver.1:
index.md

docs/_ver2:
index.md

docs/_ver2.1:
index.md

docs/_ver22:
index.md

index.md is the same file in each place, it has an intro, then an exact copy/paste of your test table:

title: "IAL Tests - Collection Version"
layout: page
---

## Testing IALs in a Collection

It's not the collection, specifically, that's causing this to fail.
But something about the collection is causing the issue.

Go back to the [main page](/).

{:color-style: style="background: black;"}
{:color-style: style="color: white;"}
{:text-style: style="font-weight: 800; text-decoration: underline;"}

|:             Here's an Inline Attribute Lists example                :||||
| ------- | ------------------ | -------------------- | ------------------ |
|:       :|:  <div style="color: red;"> &lt; Normal HTML Block > </div> :|||
| ^^      |   Red    {: .cls style="background: orange" }                |||
| ^^ IALs |   Green  {: #id style="background: green; color: white" }    |||
| ^^      |   Blue   {: style="background: blue; color: white" }         |||
| ^^      |   Black  {: color-style text-style }                         |||

One my main page, I have links set up to go to the 4 sub-pages:

There are four copies of this file in the collections:
* Both collection name and folder have a `.` in them. [Here](ver.1/index)
* Neither collection nor folder name have a `.`. [Here](ver2/index)
* Folder has a dot, but collection name doesn't. [Here](ver21/index)
* Collection name has a dot, but folder doesn't. [Here](ver2.2/index)

The first and third ones fail (the two cases where the folder name has a dot). The other two pass.

Sorry for the long reply. I hope that helps!

[jeffreytse]

Hi @brigitte-youitv

Thanks for your kindly full details about the issue and it's really helpful for me. Now I can positively tell you the good news that this issue has been addressed and later I will release a new gem package.

Thanks and regards.

[jeffreytse]

Hi @brigitte-youitv

🎉 The latest gem version v0.8.7 has been released.

This version not only includes IALs feature, but also fix the collection path issue. And I have to say THANK YOU one more time, it's your great effort and help.

Thanks and regards

[brigitte-youitv]

Thank you! Tested and it's working in my test project and my actual project too! Thank you 🙏