Positioning HTML shapes by coordinate & dimension values in part of an HTML page occupied by an HTML table
Posted on 2011-09-12
This question relates to placing individual HTML shapes to make a flow chart of low-scale pixel-precision on a page where many other items are positioned within the tags of an (invisible) HTML table. To do this, I believe I have a choice:
EITHER use divs independent of the table to position the flowchart
OR divs within a table, to position the flow chart components within one HTML table cell.
I seek to understand the best method to proceed, and would like to access an example of best practice.
What NOW is Rendered to HTML tags:
A data-driven system renders items of either shapes and text on browser pages as HTML.
Shapes are simple rectangles with text within.
There can be upto 25 of these small items per page.
The items are rendered within individual cells of an HTML table that is invisible on the browser.
HTML table tags (incl colspans and rowspans) give adequate layout control - with little or no padding.
THE NEED is to position a flow chart on the same page as these other blocks. Each instance of a browser page is different, and it is definately necessary of each flow chart to be generated as a data-driven set of individual shapes.
At present, without using HTML tables, I can position component shapes via coordinates and dimensions in the browser to create diagrams and flow charts.
I now seek the best of both worlds on the same browser page: freedom to create a flow-chart, and the ease of positioning the (upto) 25 other items (shapes and text) their individual cells of an HTML table.
I seem to have three choices:
1. Control the whole layout via divs (on a scale I am inexperienced with)
2. Create a merged cell via colspans and rowspans and use a div to position the flow chart elements within this one cell.
3. Some other solution, but not including the creation of an image file of the flow chart.
Option 2 is attractive to me (if practicable) since it builds on my existing processes, but it needd to be a reliable solution.
How does one write the HTML for a div that controls the border of an HTML table cell?
Not high Precision of layout:
The content and px position each of flowchart component (rectangles and arrowed lines) is known and is in the data-base. High precision layout is NOT necessary. The shapes need only show from which rectangle a flow-line starts, and to which rectangle its arrow head points.
Neatness is still possible:
can be aided by controlling the order of display of shapes, so rectangles can super-impose the start point of arrowed lines.
For clarity, the layout of these browser pages is driven by a database that is populated by data from a json string, which is in turn specified by an authoring application in which shape and text layout is setup and wrapped within HTML table tags. All basic dimensions and coordinates can be passed from the authoring system to the database.)
I would be grateful for the most practical solution.