CSS support in report formats for tabular results

Typical tabular results like: $BOIL_INGREDIENTS, and all the other "ingredients" lists don't provide any way to reformat the HTML.  The result is always in the form:


Basically, this results in a centered, underlined, and bold Title, followed by a 100% width table with no gridlines.  The header row of the table is bolded, and the data rows are plain text. 

I'd like to be able to control some/all aspects of these tables (fonts, spacing, grid lines, etc).  This could be accomplished with some simple changes to the generated HTML:

<table class="ingredients boil_ingredients" id="boil_ingredients_1">
<caption>Boil Ingredients</caption>

<tr>
<th></th>
...
<th></th>
</tr>

<tr>
<td></td>
...
<td></td>
</tr>
...
</table>

There are a few of changes above:

1.  Use of the <caption> tag for the table "title", instead of having the title outside of the table. 
2.  Use of the <th> tag for the header titles.
3.  Addition of the "class" and "id" attributes to each tag, allowing each tag to be styled separately to any desired level of detail.

From the above I can style all ingredients lists (.ingredients selector) the same way, or I can style all boil ingredients (.boil_ingredients selector) lists the same way, or I can style a specific copy of the boil ingredients (#boil_ingredients_1 selector) a certain way. 

In addition, I can style each tag within the above:

.ingredients caption { style choices; } // all captions for ingredients lists
.boil_ingredients th { style choices; } // all headers for .boil_ingredients lists specifically
#boil_ingredients_1 td { style choices; } //all table data for the boil_ingredients_1 lists only

Looking through the list of tags that generate tables:


All of the above could be simply "hard coded" in the existing HTML snippets within BeerSmith with the exception of the "ID" attribute because that would be a unique incrementing counter for each usage of the element (still not exactly rocket science).  Even without the "ID" attribute, it would give us a great deal of control over the look of these tables with very minor modifications to the BeerSmith source.

My ultimate wishlist for BeerSmith would be to allow the report writer to select the data elements to include in the tablular output (maybe I just want the "amount" and the "description"), and perhaps even include my own custom column(s).

I actually could fix this myself using <div class="xxxx"> elements, EXCEPT for the fact that beersmith is assigning properties inline to the TD elements. 

Note in the example above the "WIDTH=xx%" and the "ALIGN=left" items.  I can't override these with CSS classes (the "closest" style takes precedence), so I'm stuck with some funky formatting that I'd like to change.  Moreover, Beersmith is not 100% consistent in is application of inline properties: sometimes it assigns a width, sometimes it doesn't.

Admitedly, I'm probably farther afield than most in creating my own custom report....but, changing from a local formatting to a CSS based approach would allow custom report writers to do what we want, and with a default CSS would still allow the default reports to work for the masses.

Tom,
  I did not give a lot of thought to CSS support, but I can see how it might help on the PC side.  Unfortunately the Mac previewer is a very simple implementation that does not handle the CSS classes well.  Until I can get a better embedded browser for the Mac it won't be able to handle CSS.

  I think it might be possible to conditionally add CSS classes as you mention on the PC version.  However I'm not sure what to do with the width constructs as many of the formats need a proper width for each column so it is calculated and added inline.  I suppose I would need to define a CSS file for the various reports to have them work without the width constructs. 

  In any case I've bookmarked this one and put it on my list of items to look at enhancing in the future with CSS.

Brad

Brad-

The beauty of the above is that you could define a SINGLE CSS file that includes the style definitions for each class.  For example:


The "nth-of-type" selector is less than ideal because of its a hard-coded, positional dependence.  That would be easily fixable by defining another class name for each table header...eg:

BeerSmith said:

Tom,
  I did not give a lot of thought to CSS support, but I can see how it might help on the PC side.  Unfortunately the Mac previewer is a very simple implementation that does not handle the CSS classes well.  Until I can get a better embedded browser for the Mac it won't be able to handle CSS.

Click to expand...

That's a real bummer for the Mac folks.  Glad I'm not one. 

I do a lot of fun things with CSS in the reports on the PC side.  I'd be really frustrated without CSS, I'd have to save as HTML and use a proper browser to print.