search

textile / php-textile

Textile markup language parser for PHP
https://textile-lang.com
Other
216 stars 44 forks source link

Support for HTML data attributes? #160

Closed Bloke closed 8 years ago

Bloke commented 8 years ago

Is there any mileage in figuring out a syntax for rendering HTML 5 data- attributes?

The rationale behind this -- besides being generally useful for making scriptable markup -- is for creating responsive tables. Although there are plenty of JavaScript approaches, the most graceful (CSS-only) method for collapsing a table on small screen devices adds the column heading as a data-title attribute to each cell and then uses CSS to de-table the table layout into a list, automatically prepending each cell's contents with the value of the data-title attribute using:

td[data-title]:before {
  content: attr(data-title);
}

See example.

At one level, this could be a textile plugin, if they exist yet or are planned. Alternatively, it'd be neat if there was some way to flag a table to automatically do this as it renders it, but I'm not sure that's possible at present.

Since this is a very specific use case, albeit handy in table-based situations, I wondered if there was some way to permit general-purpose data- attribute support instead, so at least authors could render such tables -- or any other markup with data- attributes -- if they wished, albeit in a more verbose manner than using a simple flag on the table element itself.

With that in mind, the closest representation in today's textile is the curly-brace syntax for inline styles which offers name:value. I wonder if this could be borrowed into the class syntax for a quick win? Since a colon is an invalid character to use in a class or ID it's relatively easy to distinguish the cases. So we could have:

p(title).                => <p class="title">
p(#title).               => <p id="title">
p(title:Some cool data). => <p data-title="Some cool data">

That would, however, mean the syntaxes can't be combined as now without issue, unless the 'data' syntax was prefixed with some character, e.g.:

p(title#title@title:Some cool data). => <p class="title" id="title" data-title="Some cool data">

It also precludes the use of colon in the data string itself (unless it could be escaped somehow?)

Dunno. Just a random thought really. Could this kind of thing be generally useful, or is it one of those cases where it's better to just say "use HTML instead"?

netcarver commented 8 years ago

@Bloke Hello Stef, hope things are well with you.

I'm closing this issue as there has been plenty of time for others to chip in and back the call for this. I think this is a case where sticking with HTML would probably be less cryptic than the textile version. However, if a clear standard for dealing with responsive tables does emerge, it would be worth opening an issue to get textile to generate output that adhered to that standard.