Percent of what? A proposal

#1

THE PROBLEM
The % symbol is too vague when defining dimensions in CSS and HTML. It
can relate to an inherited value, a measure of the containing element
(which can differ between box models) or for background image
placement, the size of the element minus the size of the image.

A SOLUTION
There should be new %-like units defined in CSS to specify what the
measurement is a percentage of. These take the form of the % sign and
one or more letters:
%p - Percent of the similar measurement of the parent element, measured
"border to border." (Whether or not to count the border, I don't know.
But it should be standardized. Probably count the border on only one
side, but then what to do if the borders are asymmetrical?)
%u - Percent of the useable area inside the parent element. In other
words, the width of the parent element, minus the padding on each side.
%t - Percent of the total size of the parent element. In other words,
the width of the parent element, plus the margin on each side.
%s - Percent of the balance of the size of the element being defined
subtracted from the size of the parent element.
%su - Percent of the balance of the size of the element being defined
subtracted from the useable size of the parent element.
%pw - Percent of the width of the parent element, measured border to
border.
%uw - Percent of the useable width of the parent element.
%tw - Percent of the total width of the parent element.
%sw - Percent of the balance of the width of the element being defined
subtracted from the width of the parent element.
%suw - Percent of the balance of the width of the element being defined
subtracted from the useable width of the parent element.
%w - Percent of some width measurement of the parent element,
determined just like % but measuring horizontally regardless of what
property (such as height) is being defined.
%ph - Percent of the height of the parent element, measured border to
border.
%uh - Percent of the useable height of the parent element.
%th - Percent of the total height of the parent element.
%sh - Percent of the balance of the height of the element being defined
subtracted from the height of the parent element.
%suh - Percent of the balance of the height of the element being
defined subtracted from the useable height of the parent element.
%h - Percent of some height measurement of the parent element,
determined just like % but measuring vertically regardless of what
property (such as width) is being defined.
% - Still supported, with currently defined (or undefined) behavior.
(Mnemonics for all those letters are as follows: Height, Parent,
Subtracted, Total, Useable, Width. Width and height of the body
element, the html element, or its theoretical parent, should be
interpreted as the width and height of the document view area of the
browser window, or the physical print page. %i should probably also be
included to relate to inherited values, but I'm not sure how exactly to
define that.)

Additionally, new CSS properties should be defined to provide alternate
means of defining width and height of elements based on the intended
useable or total size:
useable-width - Defines the width of the element so that the space
inside the padding is as specified.
useable-height - Defines the height of the element so that the space
inside the padding is as specified.
total-width - Defines the width of the element so that the total
horizontal space consumed (including margins) is as specified.
total-height - Defines the height of the element so that the total
vertical space consumed (including margins) is as specified.
width - Still supported, with currently defined behavior.
height - Still supported, with currently defined behavior.

SOME USES
img#mainlogo {
width: 80%uw;
height: 45%uw;
margin: 50%suh 10%uw 1em 10%uw; }
defines that the img element with ID mainlogo (such as the main logo on
a web page) will scale with the width of the browser, but always stay
at a 16:9 aspect ratio. If the logo image is at the very top of the
page, it appears centered in the view when the user is scrolled to the
top. The margin between the image and following elements (such as h1)
scales with the user-selected font size.

div.datainput {
margin: 2px;
padding: .5em;
total-width: 50%u;
float: left; }
div.datainput input {
total-width: 100%u; }
defines div elements that can be used as columns, and input elements
that fill the useeable space within those columns. The gap between the
columns is a constant pixel value and the padding inside the columns
varies as the user changes the font size.

div.photo {
margin: .4em;
padding: .4em;
border: 1px solid;
useable-width: 200px;
float: left; }
defines a div element designed to contain an image known to be of width
200% (height not necessarily known) and some caption text. Margins and
padding scale with the user-selected font size.

body {
font-size: 1.5%w; }
defines that text in a document should vary in size according to the
width of the browser window (which often depends on screen resolution).
User-selected font size may provide additional variance.

Clearly, the vagueries of % need to be fixed. In my opinion, this is a
good way to do that, and a logical extension of existing CSS syntax.

--
Vid the Kid

#2

On 14 May 2006 15:53:04 -0700 VidTheKid <vidthekid (AT) gmail (DOT) com> wrote:

Quote:

THE PROBLEM
The % symbol is too vague when defining dimensions in CSS and HTML. It
can relate to an inherited value, a measure of the containing element
(which can differ between box models) or for background image
placement, the size of the element minus the size of the image.

A SOLUTION
There should be new %-like units defined in CSS to specify what the
measurement is a percentage of. These take the form of the % sign and
one or more letters:

Looks like everything you suggested is based on the parent element.
Why not ALSO have some additiona modifiers to refer to some other
element besides the parent element, such as:

Nth parent up (0 = parent, 1 = grandparent, 2 = greatgrandparent).
Nth child under specified element Nth parent element
Ancestor with specified class, id, or element.

It would also be nice to have expressions for any size allowing to
add or subtract, and maybe even multiply and divide multiple sizes.
At least then you could combine relative and fixed amounts.

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

Quote:

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

#3

VidTheKid wrote:

Quote:

The % symbol is too vague when defining dimensions in CSS and HTML. It
can relate to an inherited value, a measure of the containing element
(which can differ between box models) or for background image
placement, the size of the element minus the size of the image.

http://www.w3.org/TR/REC-CSS1#percentage-units

For block level elements it's a % of the content area of its parent
element. Margin, border and padding are % of the box's parent element.
For fonts it's a % of the default value. In RGB color units it's a %
of the 8 bits in the red, green and blue channel. There are others.

You can take the rule that a % is a % of either the default value or the
parent element's value.

I wouldn't consider this vague. If you were to read the spec you'll
find everything defined.

http://www.w3.org/Style/CSS/

On the other hand, it might be useful to be able to define the total
width/height of an element (including content, padding, border and
margin) as a % value.

Quote:

Clearly, the vagueries of % need to be fixed. In my opinion, this is a
good way to do that, and a logical extension of existing CSS syntax.

Yarrrrrrrgh!

--
Brian O'Connor (ironcorona)

#4

On Mon, 15 May 2006 13:14:28 +0800 ironcorona <iron.corona (AT) gmail (DOT) com> wrote:

Quote:

For fonts it's a % of the default value. In RGB color units it's a %
of the 8 bits in the red, green and blue channel. There are others.

With or without gamma correction?

What would you expect to get from 50% of #ffffff ?
#808080 ? #c0c0c0 ?

Quote:

You can take the rule that a % is a % of either the default value or the
parent element's value.

I wouldn't consider this vague. If you were to read the spec you'll
find everything defined.

http://www.w3.org/Style/CSS/

At the level he has specified an idea, it seems he has at least read some
of the document. So no need to tell him where it is unless you are just
trying to have an attitude with him. Sure, he might have read the thing
very well ... feel free to point out _where_ within the document to find
specific things.

Quote:

On the other hand, it might be useful to be able to define the total
width/height of an element (including content, padding, border and
margin) as a % value.

What does 10.3.3 say?

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

Quote:

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

#5

phil-news-nospam (AT) ipal (DOT) net wrote:

Quote:

| For fonts it's a % of the default value. In RGB color units it's a %
| of the 8 bits in the red, green and blue channel. There are others.

With or without gamma correction?

What would you expect to get from 50% of #ffffff ?
#808080 ? #c0c0c0 ?

It is always 50% of ff.

Quote:

| On the other hand, it might be useful to be able to define the total
| width/height of an element (including content, padding, border and
| margin) as a % value.

What does 10.3.3 say?

It describes the constraints there are when the browser calculates the total
width of the element - it does't let you specify the total width.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

#6

phil-news-nospam (AT) ipal (DOT) net wrote:

Quote:

On Mon, 15 May 2006 13:14:28 +0800 ironcorona <iron.corona (AT) gmail (DOT) com> wrote:

| For fonts it's a % of the default value. In RGB color units it's a %
| of the 8 bits in the red, green and blue channel. There are others.

With or without gamma correction?

I have no idea what gamma correction does but I think you're nitpicking.
It is the same as using numerical RGB values or using the combination
of three octets in the hex units.

Quote:

What would you expect to get from 50% of #ffffff ?
#808080 ? #c0c0c0 ?

Note that I said "In RGB color units it's a % of the 8 bits in the red,
green and blue channel"

it would look something like {color: rgb(50%,50%,50%)} which translates
to {color: rgb(128, 128, 128)} OR {color:#808080;}

Quote:

| You can take the rule that a % is a % of either the default value or the
| parent element's value.
|
| I wouldn't consider this vague. If you were to read the spec you'll
| find everything defined.
|
| http://www.w3.org/Style/CSS/

At the level he has specified an idea, it seems he has at least read some
of the document. So no need to tell him where it is unless you are just
trying to have an attitude with him. Sure, he might have read the thing
very well ... feel free to point out _where_ within the document to find
specific things.

You think? Then why does he say that the % value is "vague".

Quote:

| On the other hand, it might be useful to be able to define the total
| width/height of an element (including content, padding, border and
| margin) as a % value.

What does 10.3.3 say?

It refers to the containing block. If you, for instance, have the below

<div class="container">
<div class="insert"></div>
</div>

<style type="text/css">
..insert {width:100%; padding:10%; margin:10%; border:10%;}
</style>

Then the insert box would push its way out of the container box because
there's no way to specify the total width of the element (including
content, padding, border and margin) as a % value.

--
Brian O'Connor (ironcorona)

#7

On Mon, 15 May 2006 07:26:06 +0100 David Dorward <dorward (AT) yahoo (DOT) com> wrote:

Quote:

phil-news-nospam (AT) ipal (DOT) net wrote:

| For fonts it's a % of the default value. In RGB color units it's a %
| of the 8 bits in the red, green and blue channel. There are others.

With or without gamma correction?

What would you expect to get from 50% of #ffffff ?
#808080 ? #c0c0c0 ?

It is always 50% of ff.

You're evading the question. Is that 50% to be applied to the gamma
corrected value, or the linear value?

With 50%, are you expecting a 50% gray level that would be equivalent in
total light output as interleaving white lines and black lines seen at a
distance?

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

Quote:

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

#8

On Mon, 15 May 2006 15:05:02 +0800 ironcorona <iron.corona (AT) gmail (DOT) com> wrote:

Quote:

phil-news-nospam (AT) ipal (DOT) net wrote:
On Mon, 15 May 2006 13:14:28 +0800 ironcorona <iron.corona (AT) gmail (DOT) com> wrote:

| For fonts it's a % of the default value. In RGB color units it's a %
| of the 8 bits in the red, green and blue channel. There are others.

With or without gamma correction?

I have no idea what gamma correction does but I think you're nitpicking.
It is the same as using numerical RGB values or using the combination
of three octets in the hex units.

I think you better learn what gamma correction does. Maybe the standards
people need to learn, too. Most of the graphics people, especially those
working with correct color values and working with video, know it.

Quote:

What would you expect to get from 50% of #ffffff ?
#808080 ? #c0c0c0 ?

Note that I said "In RGB color units it's a % of the 8 bits in the red,
green and blue channel"

it would look something like {color: rgb(50%,50%,50%)} which translates
to {color: rgb(128, 128, 128)} OR {color:#808080;}

The natural expectation of "50%" would be "half bright". However, #808080
does not give you that. The value that will is somewhere around #c0c0c0
depending on your video monitor.

Create a big box consisting of alternating horizontal lines 2px in height,
These will alternate between white (#ffffff) and black (#000000). Make
that box half the width of the page and position it on the left. Now make
another box and fill it with a solid gray color. Stand back at a distance
and judge the brightness of each box. Change the numeric value of the gray
box until it is just the same overall total brightness of the box that has
the alternating white and black lines. When you get that, then you will
know what your monitor needs for half brightness. This value can also tell
you the approximate gamma value for your monitor.

Google or Wiki for "gamma correction" for more info. Gamma correction is
the calculation of values to be used to make up for the gamma curve of the
CRT monitor phosphors.

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

Quote:

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

#9

phil-news-nospam (AT) ipal (DOT) net wrote:

Quote:

The question makes no sense. You don't get "50% of #ffffff" you
get "rgb(50%,50%,50%)" which is (to zero decimal places) the same
as "rgb(128,128,128)" or "#7f7f7f".

THEN gamma correction is applied, as per
http://www.w3.org/TR/CSS2/colors.html#gamma-correction

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

#10

phil-news-nospam (AT) ipal (DOT) net wrote:

Quote:

On Mon, 15 May 2006 15:05:02 +0800 ironcorona <iron.corona (AT) gmail (DOT) com> wrote:
| phil-news-nospam (AT) ipal (DOT) net wrote:
|> On Mon, 15 May 2006 13:14:28 +0800 ironcorona <iron.corona (AT) gmail (DOT) com> wrote:
|
|> | For fonts it's a % of the default value. In RGB color units it's a %
|> | of the 8 bits in the red, green and blue channel. There are others.
|
|> With or without gamma correction?
|
| I have no idea what gamma correction does but I think you're nitpicking.
| It is the same as using numerical RGB values or using the combination
| of three octets in the hex units.

I think you better learn what gamma correction does. Maybe the standards
people need to learn, too. Most of the graphics people, especially those
working with correct color values and working with video, know it.

From what I've been reading there's currently no way to set the gamma
values with CSS.

Quote:

|> What would you expect to get from 50% of #ffffff ?
|> #808080 ? #c0c0c0 ?
|
| Note that I said "In RGB color units it's a % of the 8 bits in the red,
| green and blue channel"
|
| it would look something like {color: rgb(50%,50%,50%)} which translates
| to {color: rgb(128, 128, 128)} OR {color:#808080;}

The natural expectation of "50%" would be "half bright". However, #808080
does not give you that. The value that will is somewhere around #c0c0c0
depending on your video monitor.

No, this refers to a percentage of an 8 bit colour value; red, green and
blue.
http://www.w3.org/TR/CSS1#color-units

--
Brian O'Connor (ironcorona)