[RESOLVED] Wondering how to build the loops for this table formatting

mrbaseball34

I'm trying to recreate a "ballot" in an HTML table.
The PDF version of the ballot (from the 2008 election) is located here:
http://174.120.31.194/~eshipman/Precinct0015.pdf

I need it to look like this:
http://174.120.31.194/~eshipman/sub.htm
(a mockup from the customer, I am programming the back end.)

The problem lies in the fact that I don't know where to "break" columns.
I am returning the elections in separate arrays, i.e.
PRESIDENT
CONGRESSIONAL
COUNTY
NONPARTISON

It's just figuring how to break the columns has got me stumped.

Any ideas?

johanafm

Not sure what your problem is. Is it the actual decision mechanism for when to break columns, or is it how to do it that is the problem? Or both?

How?
Google multicolumn layout, or perhaps go straight to http://www.alistapart.com/articles/multicolumnlayouts/

When to?
If you're not dealing with differing data between regions, or only deal with one region (district or whatever. I'm not an american), split your columns as they did. e.g. for CONGRESSIONAL, you split between UNITED STATES SENATOR and REPRESENTATIVE IN CONGRESS DISTRICT 6.

If you are dealing with multiple/all regions and amount of data changes a lot, you need some alternative approach.
If you parse data from PDF there ought to be a reset of y-position (or increase) to the value when the first column output started, which can be used as basis for breaking into a new column yourself.
Otherwise you could just count the number of items you put into a column and break after every N items, thus disregarding the actual number of lines each item needs. It could be that it's good enough.
Otherwise you'd have to somehow calculate the actual height used by each item so you can break after N pixels instead of N items. One way to automate this process is running data for each district through a web browser, building the columns by adding items with javascript and keeping track of column height so that the next column can be started. Post back column break positions (or actual content) to server side script which now knows how things should look, and save this as static html.

mrbaseball34

johanafm;10955366 wrote:
Not sure what your problem is. Is it the actual decision mechanism for when to break columns, or is it how to do it that is the problem? Or both?

It is more of a layout issue, when do I now when to "break" columns?

johanafm;10955366 wrote:
How?
Google multicolumn layout, or perhaps go straight to http://www.alistapart.com/articles/multicolumnlayouts/

Not sure why you are telling me about CSS columns, This data is in a table.

johanafm;10955366 wrote:
When to?
If you're not dealing with differing data between regions, or only deal with one region (district or whatever. I'm not an american), split your columns as they did. e.g. for CONGRESSIONAL, you split between UNITED STATES SENATOR and REPRESENTATIVE IN CONGRESS DISTRICT 6.

If you are dealing with multiple/all regions and amount of data changes a lot, you need some alternative approach.

It doesn't work that way, they are all run together, not just one type of election in a single column.

johanafm;10955366 wrote:
If you parse data from PDF there ought to be a reset of y-position (or increase) to the value when the first column output started, which can be used as basis for breaking into a new column yourself.
Otherwise you could just count the number of items you put into a column and break after every N items, thus disregarding the actual number of lines each item needs. It could be that it's good enough.

I'm not parsing the PDF, I have the data in a database and reading the values into arrays for each type of election.

johanafm;10955366 wrote:
Otherwise you'd have to somehow calculate the actual height used by each item so you can break after N pixels instead of N items. One way to automate this process is running data for each district through a web browser, building the columns by adding items with javascript and keeping track of column height so that the next column can be started. Post back column break positions (or actual content) to server side script which now knows how things should look, and save this as static html.

I can do this using PHP if I use static row heights and calculate the rows needed to show the table using three columns. The problem lies in the cases where height of the content is more than the base row height. This was my first thought, I just wanted to know if anyone else had any other ideas.

johanafm

mrbaseball34;10955374 wrote:
Not sure why you are telling me about CSS columns, This data is in a table.

Since you're not dealing with tabular data, I assumed you'd be using CSS for visual formatting rather than a table. You'll be needing to group data, that has no semantical relationship, together into rows to build a table. It seems needlessly complicated.

mrbaseball34;10955374 wrote:
It doesn't work that way, they are all run together, not just one type of election in a single column.

I never suggested they stay in one column either. Your mockup data ends the first column with:
CONGRESSIONAL (this is the header - also the array you claim you have)
UNITED STATES SENATOR (this seems to be some kind of subheader)
- data for the above header & subheader

The second column starts with:
CONGRESSIONAL (same header as before)
REPRESENTATIVE IN CONGRESS DISTRICT 6 (new subheader)
- data for the above header & subheader

Which is why I suggested splitting between these SUBHEADERS.

That suggestion is of course based off the assumption that you have data grouped in a sensible fashion, e.g. in the same way as they did when creating the PDF, and that you are actually creating multiple columns with css (floating divs perhaps), rather than trying to do it backwards with a table.

mrbaseball34;10955374 wrote:
I'm not parsing the PDF, I have the data in a database and reading the values into arrays for each type of election.

Good to know.

mrbaseball34;10955374 wrote:
I can do this using PHP if I use static row heights and calculate the rows needed to show the table using three columns. The problem lies in the cases where height of the content is more than the base row height. This was my first thought, I just wanted to know if anyone else had any other ideas.

And my suggestion deals with knowing exactly how much height your specific data takes up, i.e. how many rows/lines it will span, as opposed to the very simple approach of just assuming one line per item.

Afaik, PHP has no built in support for text width (or final height within specific width constraints). If you don't like the javascript approach, you could use Imagick and queryFontMetrics to find out how much space each text item needs.

Still, I strongly recommend dropping your table setup and doing this with columns, from top to bottom, and left to right. The only way I personally see to solve the table approach is by solving the multi-column approach, setting up data for each column in an array, create a multidimensional array from this and then "inverting" it (assuming matrix inversion does indeed mean changing an [X]mn matrix into an [X]nm matrix by moving each element (e)mn to position (e)nm).

mrbaseball34

johanafm;10955392 wrote:
Since you're not dealing with tabular data, I assumed you'd be using CSS for visual formatting rather than a table. You'll be needing to group data, that has no semantical relationship, together into rows to build a table. It seems needlessly complicated.

It certainly IS tabular data. What makes you think that?

johanafm;10955392 wrote:
<SNIP>Still, I strongly recommend dropping your table setup and doing this with columns, from top to bottom, and left to right.

I'm not going to the trouble of creating a CSS layout for this as it is going to be easier and more efficient to do it using tables, as it should be done.