RichStyle

Standard Documentation
2011-10-20 01:58

Todo List

Here's a list of known bugs and limitations in RichStyle project. There're three kinds of parties who can help in optimizing RichStyle:

  1. W3C
  2. Browsers developers
  3. RichStyle developers

W3C

A Proposal for Form Structure

Here's a demo.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="form.css"?>
<body>
	<form>

	<!--
	
	CONTROL tag will guarantee the association
	between LABEL and INPUT, without nesting
	INPUT in LABEL, which used to make form styling more difficult,
	or using FOR attribute at all, since no one maintains 
	brotherhood better than parent!

	Using ID instead of NAME.
	Notice that storing ID in CONTROL instead of INPUT
	will prevent repeating ID/NAME in radio INPUTs.
	
	OUTPUT should contain input instructions and/or validation status.
	
	-->

		<control id="name">
			<label>Name:</label>
			<input type="text" />
			<output></output>
		</control>

		<control id="id">
			<label>ID Number:</label>
			<input type="number" />
			<output></output>
		</control>
		
		<control id="email">
			<label>Email:</label>
			<input type="email" />
			<output></output>
		</control>

		<control id="website">
			<label>Website:</label>
			<input type="url" />
			<output></output>
		</control>

		<control id="tel">
			<label>Phone:</label>
			<input type="tel" />
			<output></output>
		</control>

		<control id="attachment">
			<label>Attachment:</label>
			<input type="file" />
			<output></output>
		</control>

		<control id="message">
			<label>Comment:</label>
			<textarea></textarea>
			<output></output>
		</control>

		<control id="country">
			<label>Country:</label>
			<select>
					<li value="Syria">Syria</li>
					<li value="Jordan">Jordan</li>
					<li value="KSA">KSA</li>
			</select>
			<output></output>
		</control>

	<!-- CL: Checklist -->
	<!--
		I think it's wrong to deal with checkboxes and radio buttons
		as input elements.
		
		The right input element here is the text itself,
		think of it as a button, but with a simple indicator
		(checkbox or radio button) on the left to show its status.
		
		Notice that using List structure will allow
		the child element to set its status (disabled/enabled)
		depending on its parent's status (checked/unchecked or
		selected/unselected).
		
		Also the appearance of checkboxes and radio buttons can
		be changed using CSS as images.
		
	-->
		<control>
			<label>Marital Status:</label>
			<cl>
				<li id="married">Married
					<cl>
					<li id="hasKids">Has kids</li>
					</cl>
				</li>
				<li id="smoking">Smoking</li>
			</cl>
			<output></output>
		</control>

	<!-- RL: Radiolist -->

		<control id="gender">
			<label>Gender:</label>
			<rl>
				<li value="male">Male</li>
				<li value="female">Female</li>
			</rl>
			<output></output>
		</control>

	<!-- RESET button should also reset OUTPUT contents. -->

		<control>
			<input type="submit">Submit</input>
			<input type="reset">Reset</input>
		</control>

	</form>
</body>

With the following CSS support:

/* ------------------------------------------ */
/* The structure */

form {
	display: table;
	width: 80%;
	margin: 10px auto;
	background: ThreeDFace;
}

control {
	display: table-row;
}

label,
output {
	display: table-cell;
	width: 150px;
	vertical-align: top;
}

label {
	text-align: right;
}

input[type="text"],
input[type="file"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
select,
textarea {
	display: table-cell;
}

/*
	A suggested pseudo element for some type
	of inputs, like "file" and "color".
*/

input[type="file"]::button {
	icon: url(open.png);
	position: relative;
	end: 0;		/* instead of right */
	button-position: inside;
}

cl,
rl {
	display: table-cell;
}

li {
	display: list-item;
	list-style-type: none;
	width: 100%;
}

cl li,
rl li {
	margin-left: 21px;
}

cl li {
	list-style-image: url(checkbox.png);
}

cl li:checked {
	list-style-image: url(checkbox_checked.png);
}

rl li {
	list-style-image: url(radiobutton.png);
}

rl li:selected {
	list-style-image: url(radiobutton_selected.png);
}

cl li:unchecked li,
rl li:unselected li {
	disabled: disabled;
}

form control:last-child {
	text-align: center;
}

/* Placeholders should be disapeared in paged media */

@media print { 

input::placeholder {display:none;}

}


/* ------------------------------------------ */
/* Tricks to give a UI flavor, since
   APPEARANCE attribute still not affordable yet. */


input[type="text"],
input[type="file"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"] {
	border: 2px inset Window;
	background: window;
}

select {
	border: 2px inset Window;
	background: window;
}

select li {
	height: 5px;
	overflow-y: scroll;
}

textarea {
	border: 2px inset Window;
	background: window;
	height: 120px;
}

input[type="file"] {
	background: window url(open.png) no-repeat;
	background-position: right;

}

input[type="submit"],
input[type="reset"] {
	-moz-appearance: button;
	appearance: button;
	cursor: pointer;
	border: 2px outset buttonface;
	background: buttonface;
}

I think also that there should be another kind of textarea called "richtextarea".

Also, I noticed that when writing contents, directly, without sub-tags, in a row tag (a tag with display:table-row), the text will appear in a single left-side cell. I think it should be expanded to the whole row.

Placeholders should have a way to disappeare in paged media.

Relative Colors:

Like this:

background-color: rgb(25,50,190)+10;

which means:

background-color: rgb(35,60,200);

Styling Scrollbars:

Dealing with scrollbar as a set of psudo-elements, using the following CSS rules:

body::scroll-button {}
body::scroll-pad {}
body::scroll-bar {}

Video languages and subtitles:

Both of these type of elements have a mandatory attribute lang.
Here is the syntax:

<video src="video.mpg">
	<audiolang lang="en" src="en.mp3" />
	<audiolang lang="fr" src="fr.mp3" />
	<subtitle lang="en" src="en.txt" />
	<subtitle lang="fr" src="fr.txt" />
</video>

Customizable Media Player

So far, there's no consideration for customizability for user agent's media player. Every user agent will affer its own media player in its own way. Here is a proposal for customizable controls, not only for media player, but also for text area, and a suggested tag called 'richtextarea':

<html>
<head>
	<ui type="video" src="video_ui.xml" />
	<ui type="audio" src="audio_ui.xml" />
	<ui type="textarea" src="textarea_ui.xml" />
	<ui type="richtextarea" src="richtextarea_ui.xml" />
</head>
<body>
...
</body>
</html>

Miscellaneous

Browsers

FireFox

Chrome and Safari (and all WebKit based)

Konqueror

Opera

Prince

Internet Explorer

Tango Icons

RichStyle