New left, right and center-aligned table bbCodes. New escape bbCode.

Post Reply
User avatar
Dave Keenan
Site Admin
Posts: 2180
Joined: Tue Sep 01, 2015 2:59 pm
Location: Brisbane, Queensland, Australia
Contact:

New left, right and center-aligned table bbCodes. New escape bbCode.

Post by Dave Keenan »

In addition to the basic table bbCodes: [table], [tr], [th], [td], Douglas and I have added the following table bbCodes to allow both headings and data to be aligned left, right or center:

left-alignedcenteredright-aligned
heading[thl][thc] or [th][thr]
data[tdl] or [td][tdc][tdr]

We also defined a new bbCode [_] for escaping other bbCodes, i.e. for preventing them from being interpreted, so that we can talk about them in forum posts. The bbCode [_] merely generates a left square bracket [. For example, to talk about the bold bbCode [b] you would write [_]b]. i.e. you would insert _] (i.e. underscore, right bracket) after the opening square bracket of the bbCode whose interpretation you want to prevent.

The above table makes use of all these new bbCodes. Here is the code that generated it (with the content shown in red):

[table]
[tr][th][/th][thl]left-aligned[/thl][thc]centered[/thc][thr]right-aligned[/thr][/tr]
[tr][thl]heading[/thl][tdl][_]thl][/tdl][tdc][_]thc] or [_]th][/tdc][tdr][_]thr][/tdr][/tr]
[tr][thl]data[/thl][tdl][_]tdl] or [_]td][/tdl][tdc][_]tdc][/tdc][tdr][_]tdr][/tdr][/tr]
[/table]
User avatar
cmloegcmluin
Site Admin
Posts: 1700
Joined: Tue Feb 11, 2020 3:10 pm
Location: San Francisco, California, USA
Real Name: Douglas Blumeyer (he/him/his)
Contact:

Re: New left, right and center-aligned table bbCodes. New escape bbCode.

Post by cmloegcmluin »

And if you want to get really fancy, we've also added the ability to merge cells horizontally. You may need this feature, for example, if you want to have separate columns for the terms of your quotients and your prime count vectors, while still having one centered cell which spans across them holding the main column title:

exactquotientvector
symbolnamen/d  2 3 5 7 cents
:/|\:11M33/32[ 0 0 1 45.450¢
25/49M50/49[ 1 0 2 -2 33.400¢

The way to use this feature is simple. For any table cell bbCode ([th], [td], [thl], [thc], [thr], [tdl], [tdc], [tdr]), inside the brackets, add an equals sign followed by the number of columns to span, like this: [th=6]. It is important, though, that you then delete n-1 cells just to the right of the cell to which you are adding a span, to counteract its new span.

Here's an example:

      1           2        3        4        5        6          7
[th]vector[/th][th][/th][th][/th][th][/th][th][/th][th][/th][th]cents[/th]

becomes:

   1 2 3 4 5 6         7
[th=6]vector[/th] [th]cents[/th]

So, I set my column span to 6, and then deleted the 6 - 1 = 5 cells just to the right. Those five cells have essentially been merged with this "vector" cell.

We do not yet support vertical merging. If anyone needs it, let me know.
User avatar
Dave Keenan
Site Admin
Posts: 2180
Joined: Tue Sep 01, 2015 2:59 pm
Location: Brisbane, Queensland, Australia
Contact:

Re: New left, right and center-aligned table bbCodes. New escape bbCode.

Post by Dave Keenan »

For those who may want to implement these BBCodes on other forums, here are the patterns, replacements and help-lines:

[Edit: These stopped working when the forum software was upgraded. See two posts down for the new versions.]

[table={NUMBER;defaultValue=0}]{TEXT}[/table]
<style>table.sag-tbl-{NUMBER} td {border: {NUMBER}px solid black; border-collapse: collapse;}</style>
<style>td, th {padding: 0 5px 0 5px;}</style>
<table class='sag-tbl-{NUMBER}' style='padding: 0 0 0 1px; display: block; overflow-x: auto; overflow-y: hidden; white-space: nowrap; font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Tahoma, monospace'>{TEXT}</table>
Table

[td colspan={NUMBER;optional}]{TEXT}[/td]
<td colspan="{@colspan}">{TEXT}</td>
Table data (left-aligned)

[tdc colspan={NUMBER;optional}]{TEXT}[/tdc]
<td colspan="{@colspan}" style="text-align: center;">{TEXT}</td>
Table data centered

[tdl colspan={NUMBER;optional}]{TEXT}[/tdl]
<td colspan="{@colspan}">{TEXT}</td>
Table data left-aligned

[tdr colspan={NUMBER;optional}]{TEXT}[/tdr]
<td colspan="{@colspan}" style="text-align: right;">{TEXT}</td>
Table data right-aligned

[th colspan={NUMBER;optional}]{TEXT}[/th]
<th colspan="{@colspan}">{TEXT}</th>
Table heading (centered and bold)

[thc colspan={NUMBER;optional}]{TEXT}[/thc]
<th colspan="{@colspan}">{TEXT}</th>
Table heading centered (bold)

[thl colspan={NUMBER;optional}]{TEXT}[/thl]
<th colspan="{@colspan}" style="text-align: left;">{TEXT}</th>
Table heading left-aligned (bold)

[thr colspan={NUMBER;optional}]{TEXT}[/thr]
<th colspan="{@colspan}" style="text-align: right;">{TEXT}</th>
Table heading right-aligned (bold)

[tr]{TEXT}[/tr]
<tr>{TEXT}</tr>
Table row

[_]
&lbrack;
To escape a bbCode: Instead of [b] write [_]b]
User avatar
Dave Keenan
Site Admin
Posts: 2180
Joined: Tue Sep 01, 2015 2:59 pm
Location: Brisbane, Queensland, Australia
Contact:

Re: New left, right and center-aligned table bbCodes. New escape bbCode.

Post by Dave Keenan »

Upgrading the forum software from phpBB 3.3.2 to 3.3.10 broke the above table-related BbCodes.

As you can see above, we were making the data-cells take on borders of the same width as the table border by using <style> elements in the body of the page, which was always going against the HTML spec and relying on the good grace of the browsers. And now it seems the latest BbCode translator doesn't allow it.

The temporary replacement for [table] was:

<table style="border: {NUMBER}px solid black; border-collapse: collapse; padding: 0 0 0 1px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Tahoma, monospace;">{TEXT}</table>

And I added
style="padding: 0 5px 0 5px;"
to all the td* and th* BbCodes.
User avatar
Dave Keenan
Site Admin
Posts: 2180
Joined: Tue Sep 01, 2015 2:59 pm
Location: Brisbane, Queensland, Australia
Contact:

Re: New left, right and center-aligned table bbCodes. New escape bbCode.

Post by Dave Keenan »

I finally got it to work the same as it used to before the upgrade, by using the following patterns, replacements and help-lines:

[table borderwidth={NUMBER;defaultValue=0}]{TEXT}[/table]
<script>window.tableBbcodeBorderWidth = "{@borderwidth}px";</script>
<div style="overflow-x: auto; overflow-y: hidden;"><table style="border: {@borderwidth}px solid black; border-collapse: collapse; padding: 0 0 0 1px; white-space: nowrap; font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Tahoma, monospace;">{TEXT}</table></div>
Table

[td colspan={NUMBER;optional}]{TEXT}[/td]
<td colspan="{@colspan}" style="border: 0px solid black; padding: 0 5px 0 5px;">{TEXT}</td>
<script>var tds = document.getElementsByTagName("td"); tds[tds.length-1].style.borderWidth = window.tableBbcodeBorderWidth;</script>
Table data (left-aligned)

[tdc colspan={NUMBER;optional}]{TEXT}[/tdc]
<td colspan="{@colspan}" style="border: 0px solid black; padding: 0 5px 0 5px; text-align: center;">{TEXT}</td>
<script>var tds = document.getElementsByTagName("td"); tds[tds.length-1].style.borderWidth = window.tableBbcodeBorderWidth;</script>
Table data centered

[tdl colspan={NUMBER;optional}]{TEXT}[/tdl]
<td colspan="{@colspan}" style="border: 0px solid black; padding: 0 5px 0 5px;">{TEXT}</td>
<script>var tds = document.getElementsByTagName("td"); tds[tds.length-1].style.borderWidth = window.tableBbcodeBorderWidth;</script>
Table data left-aligned

[tdr colspan={NUMBER;optional}]{TEXT}[/tdr]
<td colspan="{@colspan}" style="border: 0px solid black; padding: 0 5px 0 5px; text-align: right;">{TEXT}</td>
<script>var tds = document.getElementsByTagName("td"); tds[tds.length-1].style.borderWidth = window.tableBbcodeBorderWidth;</script>
Table data right-aligned

[th colspan={NUMBER;optional}]{TEXT}[/th]
<th colspan="{@colspan}" style="padding: 0 5px 0 5px;">{TEXT}</th>
Table heading (centered and bold)

[thc colspan={NUMBER;optional}]{TEXT}[/thc]
<th colspan="{@colspan}" style="padding: 0 5px 0 5px;">{TEXT}</th>
Table heading centered (bold)

[thl colspan={NUMBER;optional}]{TEXT}[/thl]
<th colspan="{@colspan}" style="padding: 0 5px 0 5px; text-align: left;">{TEXT}</th>
Table heading left-aligned (bold)

[thr colspan={NUMBER;optional}]{TEXT}[/thr]
<th colspan="{@colspan}" style="padding: 0 5px 0 5px; text-align: right;">{TEXT}</th>
Table heading right-aligned (bold)

[tr]{TEXT}[/tr]
<tr>{TEXT}</tr>
Table row

[_]
&lbrack;
To escape a bbCode: Instead of [b] write [_]b]
Post Reply