Draw frames around some items

I have a file which contains component definitions, along with their
x/y coordinates and width and height. Examples for components are a
short text string, a text entry field, a date entry field, a
selection box, a checkbox.

The aim is to produce an HTML page that looks like those definitions
specify.

So I computed a grid which covers all the corners of all components
(actually only top left corners) and created an HTML table with
appropriate row heights and column widths. Into that table I
positioned all the elements and gave them the right width and height.

So far, so good.

Now, comes along a new kind of component, a frame. It has the usual
location and dimension attributes, plus some text, which is used as a
title, like so:

+-example frame--------+
| |
| |
| |
+----------------------+

I hope you can see the ascii graphics.

The idea behind the frame is that the frame frames all of the
components that are inside it.

(What happens when a component overlaps a frame border is
unspecified. They are drawn on top of each other, I guess. I'd
rather ignore this problem and pretend that all components will be
either fully inside a frame, or fully outside it.)

A logical implementation for this kind of frame would be the an HTML
table with a border. But this implementation doesn't fit the current
grid implementation too well. A way to deal with this is to do a
kind of a recursive layout, where I figure out which components are
inside the frame and then recursively call my table-building
algorithm for those.

Can you think of a clever HTML trick that would help me to avoid this?

For example, it might be possible to decompose the frame into the four
sides, and to consider each of them a separate component. Then I
could compute table rows and columns normally for the four sides. But
I'm afraid that the lines for the sides would then not join
correctly. (How to draw horizontal and vertical lines in HTML?)


Another approach might be to use absolute positioning with CSS. It
would lead to a simple algorithm, since the input is close to the
output. But if the browser doesn't grok absolute positioning, then
this approach will show nothing useful, whereas the table approach
might produce something that at least topologically looks like the
specification. Thus, I decided against the absolute positioning
approach. WDYT?

Kai

re: Draw frames around some items

Kai Grossjohann wrote:[color=blue]
> I have a file which contains component definitions, along with their
> x/y coordinates and width and height. Examples for components are a
> short text string, a text entry field, a date entry field, a
> selection box, a checkbox.
>[/color]

Is there a reason you can't use <fieldset> for that:
<fieldset>
<legend>Example Frame</legend>
<input type="text">
<select>
<option>Option 1</option>
</select>
<input type="checkbox">
</fieldset>

?

re: Draw frames around some items

Keith Bowes <do.not@spam.me> wrote:
[color=blue]
> Is there a reason you can't use <fieldset> for that:[/color]

Isn't it sufficient to state that there was no hint of any form being
involved? It would be very misleading to use form-related constructs
for something that isn't a form at all.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

re: Draw frames around some items

"Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote in message news:<Xns9416E2C75369jkorpelacstutfi@193.229.0.31> ...[color=blue]
> Keith Bowes <do.not@spam.me> wrote:
>[color=green]
> > Is there a reason you can't use <fieldset> for that:[/color]
>
> Isn't it sufficient to state that there was no hint of any form being
> involved? It would be very misleading to use form-related constructs
> for something that isn't a form at all.[/color]

I apologize. It is a form. I didn't think it was relevant to the
question, that's why I didn't state so in my original message.

Kai

re: Draw frames around some items

Keith Bowes <do.not@spam.me> wrote in message news:<1066254640.834784@cache3>...[color=blue]
> Kai Grossjohann wrote:[color=green]
> > I have a file which contains component definitions, along with their
> > x/y coordinates and width and height. Examples for components are a
> > short text string, a text entry field, a date entry field, a
> > selection box, a checkbox.
> >[/color]
>
> Is there a reason you can't use <fieldset> for that:[/color]

I didn't know that <fieldset> exists. Thanks for pointing this out.

Does this play well with my table layout? I think it would lead to
unbalanced start/end tags, if applied naively. But I am naive, so how
to apply it non-naively?

Let's say the original meta data specify four controls:

(1,1) - (20,5) text field A
(10,10)-(50,40) frame
(12,12)-(35,20) text field B
(55,10)-(65,15) text field C

As you can see, the frame frames text field B only. Thus, the HTML
code needs to look like this: the <fieldset> tag must come before the
text field B and the </fieldset> tag must come after text field B.

But my row/column algorithm will produce a table with 3 or 4 columns.
The first row contains text field A, the second row contains the frame
and also text field C, the third row contanis text field B.

So I get something like

....<tr>...<fieldset>...</tr>...
....<tr>...</fieldset>...</tr>...

which means unbalanced start/end tags.

Ideas?

(I hope you can understand what I mean; I fear that the above is not
explained very well.)

Kai