XF 2.1 How to show tab delimited data in columns that are aligned correctly

Joe Kuhn

Well-known member
I'm working on a project for another member who has a site with tab delimited data in posts. He's got alignment problems, so I've offered to give him a hand at straightening out the columns for his forum members.

The key for me has been to understand that the tab character is used as a delimiter between fields. That means there are no space characters in the source data between data elements, just tab characters, as in:

Data1[tab]Data2[tab]Data3[CR][LF]

The website view-char shows this nicely after creating the above data line in a text editor that honors tab characters like Windows Notepad, pasting the line into the website and hitting 'Show me the characters' button. Note that even their editor won't let you type a tab character in the middle of some text so you have to do it in another app and paste it in, then hit the show-me button. They show the tab character as a right arrow.

1586109815715.png

If you're going to replace the tab character with spaces and keep the alignment the same, you need to add the correct number of spaces to fill out the field.

Suppose your fields are 8 characters long max. If a field is filled with 5 characters as above you need to add 3 spaces to keep the spacing the same when switching from tabs to spaces. Let's demonstrate with a second line of data that's filled differently. To keep the second row below in line with the first, you need to add 4 spaces after "Dat4" and 2 spaces after 'Data5'.


1586110715854.png

Here it is in view-char with tab characters replaced with spaces, shown as dots:

1586111084205.png

Notice that both the before and after windows above are aligned correctly. The area where you paste the string and the "Show me the characters" result are both aligned column-wise. That's the goal. Many editors simply replace tab characters with x number of spaces which will put the alignment out of whack (and they eat extra spaces). You can see that here in the second column below. The third column is aligned because of the extra character in "Data5".

Data1 Data2 Data3
Dat4 Data_5 Data6


More later.
 
Last edited:
The above covers some basics and minimal differences. So what difference does it really make to your reader? Here are a couple of examples showing more extreme problems. These demonstrate how annoying the issue can be, at best, and how unreadable it really is, at worst.

Code:
S        trans    Time    STM    stps    ETM    etps    trans Time%
St        1.45    2.24    22    9.82    23    10.27    39.3%
Ste        0.92    2.60    12    4.62    13    5.00    26.1%
Step        1.48    1.88    15    7.98    16    8.51    44.0%
Step1        0.60    1.00    14    14.00    14    14.00    37.5%
Step12        1.45    2.24    22    9.82    23    10.27    39.3%
Step123        0.92    2.60    12    4.62    13    5.00    26.1%
Step1234    1.48    1.88    15    7.98    16    8.51    44.0%
Step123        0.60    1.00    14    14.00    14    14.00    37.5%
Step12        2.44    4.80    32    6.67    33    6.88    33.7%
Step1        0.60    1.00    14    14.00    14    14.00    37.5%
Step        1.48    1.88    15    7.98    16    8.51    44.0%
Ste        0.92    2.60    12    4.62    13    5.00    26.1%
St        1.45    2.24    22    9.82    23    10.27    39.3%

Total        3.89    7.04    54    7.67    56    7.95    35.6%
Code:
Step        trans    Time    STM    stps    ETM    etps    trans Time%
Longlbl1    2.44    4.80    32    6.67    33    6.88    33.7%
A        1.45    2.24    22    9.82    23    10.27    39.3%
Longlbl2    0.92    2.60    12    4.62    13    5.00    26.1%
B        1.48    1.88    15    7.98    16    8.51    44.0%
Longlbl4    0.60    1.00    14    14.00    14    14.00    37.5%
C        1.45    2.24    22    9.82    23    10.27    39.3%
Longlbl5    0.92    2.60    12    4.62    13    5.00    26.1%
D        1.48    1.88    15    7.98    16    8.51    44.0%
Longlbl6    0.60    1.00    14    14.00    14    14.00    37.5%

Total        3.89    7.04    54    7.67    56    7.95    35.6%

Real life examples will be somewhere in between these extremes, but when data is important to your site, readability is important.

So what's the solution? You can't just replace tab characters with x number of spaces. You have to replace them with spaces out to the end of the current field. If your field is 8 characters long and you've used up 3 with data, you add 5 spaces to make 8. It's that simple.

Like this:
Code:
S               trans   Time    STM     stps    ETM     etps    trans Time%
St              1.45    2.24    22      9.82    23      10.27   39.3%
Ste             0.92    2.60    12      4.62    13      5.00    26.1%
Step            1.48    1.88    15      7.98    16      8.51    44.0%
Step1           0.60    1.00    14      14.00   14      14.00   37.5%
Step12          1.45    2.24    22      9.82    23      10.27   39.3%
Step123         0.92    2.60    12      4.62    13      5.00    26.1%
Step1234        1.48    1.88    15      7.98    16      8.51    44.0%
Step123         0.60    1.00    14      14.00   14      14.00   37.5%
Step12          2.44    4.80    32      6.67    33      6.88    33.7%
Step1           0.60    1.00    14      14.00   14      14.00   37.5%
Step            1.48    1.88    15      7.98    16      8.51    44.0%
Ste             0.92    2.60    12      4.62    13      5.00    26.1%
St              1.45    2.24    22      9.82    23      10.27   39.3%

Total           3.89    7.04    54      7.67    56      7.95    35.6%


Step            trans   Time    STM     stps    ETM     etps    trans Time%
Longlbl1        2.44    4.80    32      6.67    33      6.88    33.7%
A               1.45    2.24    22      9.82    23      10.27   39.3%
Longlbl2        0.92    2.60    12      4.62    13      5.00    26.1%
B               1.48    1.88    15      7.98    16      8.51    44.0%
Longlbl4        0.60    1.00    14      14.00   14      14.00   37.5%
C               1.45    2.24    22      9.82    23      10.27   39.3%
Longlbl5        0.92    2.60    12      4.62    13      5.00    26.1%
D               1.48    1.88    15      7.98    16      8.51    44.0%
Longlbl6        0.60    1.00    14      14.00   14      14.00   37.5%

Total           3.89    7.04    54      7.67    56      7.95    35.6%

All for now.
 
Last edited:
Tried pasting 3 fields with tabs between them into a 1 by 3 table

field1 field2 field3

It didn't work. Darn. They all went into the first cell and which got real big. The tab characters weren't honored. I thought it might work because you can tab between the cells just fine. Perhaps Regex will help me.
 
Turns out Excel has a SaveAs option called "Formatted Text (Space Delimited) where they've done smart spacing to fill out the field, not just 8 spaces per tab. As long as everything is aligned left or right, it's a solution going forward.

1586224584248.webp
 
.prn from Excel:

Code:
Step      trans   Time    STM     stps    ETM     etps    trans Time%
Longlbl1  2.44    4.8     32      6.67    33      6.88    0.337
A         1.45    2.24    22      9.82    23      10.27   0.393
Longlbl2  0.92    2.6     12      4.62    13      5       0.261
B         1.48    1.88    15      7.98    16      8.51    0.44
Longlbl4  0.6     1       14      14      14      14      0.375
C         1.45    2.24    22      9.82    23      10.27   0.393
Longlbl5  0.92    2.6     12      4.62    13      5       0.261
D         1.48    1.88    15      7.98    16      8.51    0.44
Longlbl6  0.6     1       14      14      14      14      0.375

Total     3.89    7.04    54      7.67    56      7.95    0.356


S         trans   Time    STM     stps    ETM     etps    trans Time%
St        1.45    2.24    22      9.82    23      10.27   0.393
Ste       0.92    2.6     12      4.62    13      5       0.261
Step      1.48    1.88    15      7.98    16      8.51    0.44
Step1     0.6     1       14      14      14      14      0.375
Step12    1.45    2.24    22      9.82    23      10.27   0.393
Step123   0.92    2.6     12      4.62    13      5       0.261
Step1234  1.48    1.88    15      7.98    16      8.51    0.44
Step123   0.6     1       14      14      14      14      0.375
Step12    2.44    4.8     32      6.67    33      6.88    0.337
Step1     0.6     1       14      14      14      14      0.375
Step      1.48    1.88    15      7.98    16      8.51    0.44
Ste       0.92    2.6     12      4.62    13      5       0.261
St        1.45    2.24    22      9.82    23      10.27   0.393
 
Top Bottom