A method to draw table tags with border="0" attribute at edit time
Original Publication Date: 2005-Jan-25
Included in the Prior Art Database: 2005-Jan-25
Disclosed is a method to draw frames of a table with a "border=0" attribute and to draw frames of its cells as a visual cue for editing a Web page in a WYSIWYG editor. These frames are not shown in the Web browser but are necessary to help the user know the size and position of a table in a WYSIWYG editor even when the table has no border. In order to arrange objects in a Web page, a table with a "border=0" attribute is often used. Using this method, it is possible to draw such frames simply and clearly. This method is especially effective when the value of "cellspacing" attribute is 0, 1, or 2.
A method to draw table tags with border ="0" attribute at edit time
This method is used for WYSIWYG editors to draw frames of a table that have a "border=0" attribute. It has the following merits:
Redundant frames of tables and table cells are not drawn.
It is possible to apply this method not only to solid line but also to dotted line. It is easy to realize the frames of table cells even if tables are nested.
Figure 1 shows the dotted frames drawn by this method for users' editing support. The frames are not drawn in a browser (Figure 2).
Figure 1 Frames drawn by this method
Figure 2 No frame in a browser
Figure 3 shows the processing flow of this method.
Figure 3 Processing flow
The first step is to distinguish between editable regions and non-editable regions. Non-editable region is a part of the editor canvas where users are not allowed to edit. For example, if a Web page consists of its own contents and other parts derived from a template of a separate file, its own contents are editable and the parts from the template are non-editable. This method does not draw frames for a table and its cells when they are in non-editable region. This is because the frames are only for editing support. This step is also applicable to other invisible tags such as <DIV> and <FORM>.
The second step is to draw the table frame. If the value of cellspacing attribute for the table does not equal 0, 1, nor 2, line segments are drawn to surround the table. Each line segment equals one of the edges of the rectangular area that the table occupies on the canvas.
The third step is to draw table cell frames. Line segments are drawn to surround each table cell. Coordinates of the segment's ends are adjusted depending on the value of the cellspacing attribute specified for the table. Table 1 shows the exact coordinates of the surrounding line segments of one cell whose top left corner and bottom right corner are located at (X1, Y1) and (X2, Y2) respectively. The origin of coordinate axis is assumed to be the top left corner of the canvas.