Three design-related (HTML or CSS) elements for your consideration

Hello,

As a more technically-oriented organization, I've noticed much of your work
now involves the more advanced standards and aspects of codes that are used
to develop Web sites. However, because you also establish the standards for
code which are *still* primarily used by novices, the public and amateur web
site designers around the world, I wanted to send a very short list of
proposed design-related elements which I feel would most benefit those
people - and which I hope would be considered for inclusion with your next
HTML and/or CSS standards releases.

Simply, from the perspective of your users, the simple and
easy-to-understand HTML layout language is - and will remain to be - the
vastly predominant code, used by most people to control the appearance of
their Web sites than any other code - including CSS or raw XML languages. As
such, some simple design-related elements should be included as part of your
consideration of the next HTML standard (or "XHTML" if this is to be the
next standard).

Here are three elements I'd like to contribute. Please feel free to contact
me if you have any questions, and thanks in advance for your consideration!

Best regards,

Thomas W. Krafft
WebSite Design & Development
http://www.krafft.com
thomas@krafft.com

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Additional Design Elements for HTML (or XHTML) or CSS Standards (preferably
X/HTML)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Proposed element # 1: Ability to add rounded or other-shaped corners to
tables or table cells. 

Description: Typical design-related aspects of control would be added to the
current HTML TABLE, TR, TH and TD specifications, so that site-builders
could control the appearance of the corners of tables and cells or the ends
of rows and columns.

For example, the current HTML code <table border="1" width="100%> creates a
simple square box. But there could be some "corner" and/or "end-cap" tags
added to the specification, so that the HTML code could also add an angled
or rounded edge around every corner... 

Possible HTML element:
...CORNER<-left|-right|-top|-bottom>="<shape[angle|round]>, <height>,
<width>"

Examples: 

<table border="1" corner="round, 25, 25"> would produce a table with rounded
(and visible) corners (of 25 pixel diameter). Allowing both the height and
width options would give people more control over the angle or slope of
their table corners, but if only one number is given, that would be
interpreted as a default diameter or square side-length.

<table border="0" corner="angle, 30, 30"> would produce a table with angled
corners (or an octagonal shape), that would be visible with use of
background colors.

<table border="1" corner-top="round, 15"> would produce a table with a
rounded top corners (perfect for navigational "tabs" or "Amazon-like"
navigational designs).

<table border corner-top-right="angle, 80, 20"> would cut an angle through
the top-right corner of the table, with 4-times the upward slope or height
as width.

Possible extension: "SRC"... The SRC variable would allow people to use an
image as the border around any table or cell. If the corner-type is "round"
then people could use rounded images that would be inset into the corners by
the height/width dimensions given, and automatically rotated for each corner
(if applied to all corners). A border image could also be automatically
rotated and mitered at the correct angles for any angle-type border.

Justification: The Web is becoming a world of squares (in terms of design on
Web pages), because there's no easy way to change the appearance of the
corners of tables and cells without a fair amount of additional HTML code,
extra rows and columns and difficult-to-create graphical elements (and the
technical or design background to understand how to layout this more
complicated type of appearance). Addition of an element to control the
corners of tables or cells would greatly improve and ease this process.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Proposed element # 2: Ability to add drop-shadows to HTML tables or cells.

Description: This would give typical users a great element of control over
the appearance of their personal and business Web sites. Simply, the
drop-shadow element would be an option for HTML tables or table cells which
would add various types

Possible HTML element: ...SHADOW="<angle(degrees)>, <blur(0-10)>, <color>,
<distance(pixels)>"

Examples: 

<table border="0" shadow="135, 5, #000000, 12"> would produce a table with a
typical "south-east shadow" or one that drops down and to the right (at an
angle of 135 degrees), which is half as blurry as possible, black in color
and 12 pixels from the edge of the table.

<table border="0" shadow="90, 0, #990000, 5"> would give you a sharp (0
blur), dark red line (5 pixels wide) that runs down the right side of any
table

<table border="0" shadow="135, 0, #E7E7E7, 10"> would display a gray, sharp
shadow (0 blur) which is 10 pixels down and to the right of the table.

Justification: Again, for simplicity's sake, it'd be MUCH easier to add a
drop-shadow using an HTML or style tag than by any of the current methods
(images, background colors, additional nested tables, rows and columns) -
and drop-shadows are one of the most popular design elements on the Web (and
would be even more so if people had the technical or design experience to
produce them).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Proposed element # 3: Ability to display "stroke-effect" or colored outline
around non-transparent portion of an image on mouseOver.

Description: Image MouseOver effects are very popular but not very easy to
produce. CSS standards are applied differently or not at all in different
browsers. Both Javascript and CSS can be turned off today or may not always
be supported in WAP, cellular/wireless browsers. DHTML and CSS tags can only
effect the actual image (square, outer) borders, and not any of the actual
image-data within those dimensions...

The easiest way I've found to produce a highlighting effect on mouseOver is
to construct an image on a transparent background, and then set a
background-color variable for the a:hover CSS/style element. But again, the
highlighting effect will appear over ALL transparent regions, and cannot be
controlled to provide more of an image (defined here as the NON-transparent
portions of an image) outline effect...

Most people are looking for a simple effect which will make some image
appear outlined on mouseOver, but the simplest implementations give terrible
results. For example, if you have an image which is a round button on a
(square) transparent background. The simpler mouseOver effects people try
using would only highlight the square outer border of the image, and not the
round-button or visible part of the image.

So, why not add an HTML tag which would enable a new interpretation of the
non-transparent and transparent regions of any graphical image on mouseOver,
where the non-transparent part of the image could display an outline on
mouseOver. In Adobe PhotoShop, this is called the "Stroke" effect typically
used on Text Layers... Most people don't know this, or how to write more
complicated javascript or CSS/DHTML mouseOvers - but they have grown fairly
knowledgeable of creating or obtaining GIF images with transparent
backgrounds...

Possible HTML element: ...OUTLINE="<always|mouseover|visited>, <color>,
<width(pixels)>"

Examples: 

<A HREF="/"><IMG SRC="/images/something.gif" OUTLINE="mouseover, #000000,
3"></A> would produce a 3 pixel wide outline (in black) around the
non-transparent portions of a image with transparent regions (GIF 87/89a)

Justification: Simple is better. This OUTLINE element would provide a cheap
image effect that can be controlled at the root/HTML level, and which gives
the public a nice and very adaptable design element they can use to improve
the appearance of their business and personal Web sites. Also, this element
does something unusual, in that it allows users to create outlines and
highlighting effects around the actual visible portions of an image, instead
of within the square-box confines of the image-dimensions.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -