Baseball Scorecard generated with a Cascading Style Sheet (CSS)

CSS Generated Scorecard Table

The new scorecard is batter than last years model - in many ways. But in some ways it's not functioning as well as I had hoped.

The Good.
 
The new CSS-only Scorecard has a diamond icon in the At-bat boxes - just like the old paper and pencil scorecards. Secondly, it has much more stability than last years model. CSS tables are much better than HTML tables. In all the browsers I've tested the scorecard in, the main scorecard table's boxes and text stay where they're supposed to be - in all screen resolution settings, and in every 'Zoom' setting.

As well CSS lets you change style qualities with just a couple of quick changes to the code, in an easy to find short list near the top of the code.


The Blogger Create interface works with your Browser and your computer's processor to constantly crawl your Blog while you are creating. It's saving edits, checks spelling and runs the short-cut widgets, going and getting code and placing it appropriately when you request, for example, a link be created. The longer the coding and text is in one's post - the longer the Blogger Interface takes to respond to a request. Even though this Scorecard is half again larger in number of characters than last years scorecard - with it's better operability, and stylish look - this CSS scorecard actually runs very crisply.


Text in the Table's 'Title Row' is padded and the text floats center. This blog's Font settings have been set bigger to make it easier to read. All text in the scorecard is padded top and left, which makes for a professional look.

As well, the scorecard's text areas have been optimized. Each Player's Row now includes:

Player Name box has 14 substitution lines
Nine Innings of At-bat boxes with enough room for Project Scoresheet notations for offense, defence and pitching.
Ten column Player's Totals tables offer enough columns to record offensive, and defensive game statistics

While I'd rather all this could fit a usual screen resolution setting (usually at between 800 and 1280 pixels in width.), the size of the scorecard is dependent on the number of character spaces required to score a game. The new Scorecard is huge - it's 4300px wide! As the text areas got bigger to accommodate every scoring possibility, the size of the scorecard over nine innings grew and grew - this necessitated a larger font size for the blog, which in turn necessitated larger text areas in the table. It was a balancing act and I think the scorecard as it is, is the best of readability and use-ability. The internet is a big place, and readers or creators of these scorecards can use their browser's Zoom feature to help them see details up close - or Zoom out to get an over all impression of a game. From what I've seen of smart phone apps - and having viewed last year's Bigger! Better! Scorecard in an iPhone, with no app - I expect that this format will work very well in mobiles too.

On PC's - rather than just the "increase text size" that was the only way to change screen resolution "on the fly" in Internet Explorer 6, I see that IE 7 has included the zoom feature that Firefox has had for years (and that Google Chrome and Safari also has). In all these browsers zoom is controlled by pressing Ctrl and + , or -  (next to the number keypad). On a iPhone touch screen, zoom is a sweep of your thumb! I haven't had the opportunity to look at an Android.

I just tried Safari 5.0.4 Browser for Windows XP and it looks great.

The Bad

Playing with the example below I've discovered a problem with CSS generated tables that I had hoped they would have solved! I notice on zoom that the Title Row table (Visiting Team, Inning number and the Batter Totals table headings), changes size relative to the AB box table. The Title Row is a separate table from the much larger 9 inning by 9 player scorecard below it. In writing this I've thought of a solution that I will code tomorrow that I wrote and installed. The key to the problem, I thought, was that the large table is actually a row of tables, while the Title Row was one table, a row of table header tags (th). I tried to fix it by making each box of the Title Row a table and placing them in a row just like the AB box table below it, and installing it as the top row in a one and only table. If you try zooming in and out you can see that attempted fix did not work. On zoom the Title Row still moves relative to the AB box table.

Hmmm... Back to the drawing board. It could be that because the Title Row has different div.x qualities to the div.x qualities that make up the AB box table, the browser changes them independently of each other (even though they are both defined by pixel - !?). Another idea is that the width of the scorecard box widths are completely unique because of the AB boxes 'columns with-in a box' construction. I may break down the components of the AB boxes, calculate what the properties of each component contributes to the total width, and then try to re-create that width in each of the corresponding, and spanning Title Row boxes.

Yikes.

Perhaps the whole thing needs to be characterized in percentages, and the outer wrapper fixed in pixels.

And so it goes...


(..and yes, I saw the typo at the top --- cute isn't it?)

Boston Red Sox 1st Inning 2nd Inning 3rd Inning 4th Inning 5th Inning 6th Inning 7th Inning 8th Inning 9th Inning R H E A LOB 2BH 3BH HR AB AVG

1. Jacoby Ellsbury CF PH 7th Saltalamacchia 8th C #9 1,2 3BH9 #9 2,H RBI

A Players Name

A Players Name

A Players Name

A Players Name

A Players Name

A Players Name

A Players Name

A Players Name