8000 csswg-drafts/css-egg/Overview.bs at f9c43833d4d953ff4de8d3ec076c7426170c1331 · w3c/csswg-drafts · GitHub
Skip to content

Overview.bs

Latest commit

 

History

History
410 lines (369 loc) · 13.9 KB

Overview.bs

File metadata and controls

410 lines (369 loc) · 13.9 KB
<h1>CSS Expressive Generalizations and Gadgetry Level 1</h1>
<pre class='metadata'>
Shortname: css-egg
Level: 1
Status: ED
Work Status: Exploring
Group: csswg
Date: 2015-04-01
TR: https://www.w3.org/TR/css-egg/
ED: https://drafts.csswg.org/css-egg/
Editor: Florian Rivoal, Vivliostyle, http://florian.rivoal.net, http://vivliostyle.com
Abstract: This module extends the vocabulary of CSS with terms frequently used in certain domains, making it easier for authors to write understandable and maintainable style sheets.
Link Defaults: css-values-3 (type) <time>
</pre>
<style type="text/css">
body {
background: -o-double-rainbow(center), url("https://www.w3.org/StyleSheets/TR/logo-[STATUS]") top left no-repeat;
background: double-rainbow(center), url("https://www.w3.org/StyleSheets/TR/logo-[STATUS]") top left no-repeat;
}
:any-link {
cursor: -o-double-rainbow(center), pointer;
cursor: double-rainbow(center), pointer;
}
</style>
<h2 id="intro">
Introduction</h2>
<em>This section is not normative.</em>
As evidenced by the extraordinary variety of designs found on the web,
CSS is a very expressive language,
capable of describing unlimited styles and layouts.
However, one of the design goal of CSS was also to make it
easy to learn and to read by people.
Making it simple for untrained authors to read and guess
the meaning of a style sheet after only a basic introduction to CSS
has contributed greatly to the success of the language.
In addition, easy-to-read style sheets are also easier to maintain.
In this spirit, this specification introduces a few new values and units,
which, while not bringing significant new capabilities to the web platform,
makes it possible to write style sheets that are easier to read than ever before,
by enabling authors to use values and units that are familiar
and appropriate for the domain they are working on.
<h3 id="interact">
Module Interactions</h3>
This module extends:
<ul>
<li>the data type definitions in [[!CSS3-VALUES]]
<li>the <<gradient>> definition in [[!CSS4-IMAGES]]
<li>the 'voice-rate' property in [[!CSS3SPEECH]]
</ul>
<h2 id="units">
Extended Units</h2>
CSS provides several <a spec="css-values-3">absolute length</a> units such as ''cm'' or ''in'',
as well as several <<time>> units such as ''s'' or ''ms''
They can all be converted between each other at fixed ratios, but are
nonetheless provided in recognition that it is most convenient for authors
to use units that they are most familiar with, or that some designs are
more naturally expressed in some units than others.
<h3 id="astro-units">
Astronomical units</h3>
This specification adds four <a spec="css-values-3">absolute length</a> units
which should be appreciated by authors
in fields such as astronomy and fundamental physics.
The new units are ''ls'', ''pc''
and their sub multiples ''pls'' and ''apc''.
They are defined as <a spec="css-values-3">physical units</a>.
<table class="data" export>
<thead>
<tr><th>unit
<th>name
<th>equivalence
<tbody>
<tr><th><dfn>apc</dfn>
<td>attoparsec
<td>1 ''apc'' = 3.086 ''cm''
<tr><th><dfn>pls</dfn>
<td>picolightsecond
<td>1 ''pls'' = 1.133 ''px''
<tr><th><dfn>ls</dfn>
<td>lightsecond
<td>1 ''ls'' = 10<sup>12</sup> ''pls''
<tr><th><dfn>pc</dfn>
<td>parsec
<td>1 ''pc'' = 10<sup>18</sup> ''apc''
</table>
Note: Lightsecond was chosen instead of the more familiar lightyear
to make sure that layouts computed during leap years
would be unambiguously identical
to those computed during non-leap years.
Note: This specification does not address relativistic effects
of scrolling or animations and transitions
at (or beyond) the speed of light.
<div class="example" id="celestial-css">
When writing a page representing the inner solar system at scale, the following markup and style could be used.
<pre><code class="lang-markup">
&lt;div id=space>
&lt;div class=celestial-body id=sun data-color=yellow
data-radius=2.3ls>
&lt;div class=celestial-body id=mercury data-color=lightgray
data-radius=0.0081ls data-semimajor-axis=193ls data-orbital-period=6.278ftn>&lt;/div>
&lt;div class=celestial-body id=venus data-color=#FFD881
data-radius=0.020ls data-semimajor-axis=361ls data-orbital-period=16.05ftn>&lt;/div>
&lt;div class=celestial-body id=earth data-color=blue
data-radius=0.021ls data-semimajor-axis=499ls data-orbital-period=26.09ftn>
&lt;div class=celestial-body id=moon data-color=#E0E0E0
data-radius=0.0057ls data-semimajor-axis=1.28ls data-orbital-period=2.109ftn>&lt;/div>
&lt;/div>
&lt;div class=celestial-body id=mars data-color=#AD674D
data-radius=0.011ls data-semimajor-axis=760ls data-orbital-period=49.07ftn>&lt;/div>
&lt;/div>&lt;/div>
&lt;style></code><code class="lang-css">
#space {
background:black;
overflow:hidden;
position: relative;
}
.celestial-body {
position:absolute;
left: 50%; top: 50%;
border-radius: 50%;
border-style:solid attr(data-radius length, 0) attr(data-color color, white);
margin: calc(-1 * attr(data-radius length, 0));
transform-origin: attr(data-radius length, 0)
calc(attr(data-radius length, 0) + attr(data-semimajor-axis length, 0));
animation: orbit linear infinite attr(data-orbital-period time, 0);
}
@keyframes orbit {
from { transform: translateY(calc(attr(data-semimajor-axis length, 0) * -1)) rotate(0); }
to { transform: translateY(calc(attr(data-semimajor-axis length, 0) * -1)) rotate(-360deg); }
}</code><code class="lang-markup">
&lt;/style></code>
</pre>
The following is a disappointingly small sample rendering (not at scale)
of what this would look like.
With the new units and more space than this specification can offer,
this would instead be overwhelmingly awesome.
<style>
/**
This would be nicer using attr() or custom properties,
but there's not enough support in browsers to make a good demo with them.
The proportions to make this fit in the spec are as follow:
1px = 1ls
1s = 10 days
sun radius x 2
planets & moon radius x 100
planetary orbits x 0.25
moon orbit x 5
All are rounded up to the closest integer pixel,
because otherwise it doesn't work right in some browsers.
*/
#sun {
border-width: 5px;
margin: -5px;
border-color: yellow;
top: 50%;
box-shadow: yellow 0 0 10px, yellow 0 0 20px, yellow 0 0 30px;
/* The box shadow size has no other justification than making the sun look good. */
}
#mercury {
border-width: 1px;
margin: -1px;
top: -49px;
transform-origin: 1px 50px;
-webkit-transform-origin: 1px 50px;
animation-duration: 8.797s;
-webkit-animation-duration: 8.797s;
border-color: lightgray;
}
#venus {
border-width: 2px;
margin: -2px;
top: -90px;
transform-origin: 2px 92px;
-webkit-transform-origin: 2px 92px;
animation-duration: 22.47s;
-webkit-animation-duration: 22.47s;
border-color: #FFD881;
}
#earth {
border-width: 2px;
margin: -2px;
top: -125px;
transform-origin: 2px 127px;
-webkit-transform-origin: 2px 127px;
animation-duration: 36.53s;
-webkit-animation-duration: 36.53s;
border-color: blue;
}
#moon {
border-width: 1px;
margin: -1px;
top: -6px;
transform-origin: 1px 7px;
-webkit-transform-origin: 1px 7px;
animation-duration: 2.953s;
-webkit-animation-duration: 2.953s;
border-color: #E0E0E0;
}
#mars {
border-width: 1px;
margin: -1px;
top: -190px;
transform-origin: 1px 191px;
-webkit-transform-origin: 1px 191px;
animation-duration: 68.7s;
-webkit-animation-duration: 68.7s;
border-color:#AD674D;
}
#space {
height:400px;
background:black;
overflow:hidden;
position: relative;
}
.celestial-body {
left: 50%;
position:absolute;
border-style:solid;
border-radius: 50%;
animation: orbit linear infinite;
-webkit-animation: orbit linear infinite;
}
@keyframes orbit {
from { transform: rotate(0); }
to { transform: rotate(-360deg); }
}
@-webkit-keyframes orbit {
from { -webkit-transform: rotate(0); }
to { -webkit-transform: rotate(-360deg); }
}
</style>
<div id=space>
<div class=celestial-body id=sun>
<div class=celestial-body id=mercury></div>
<div class=celestial-body id=venus></div>
<div class=celestial-body id=earth>
<div class=celestial-body id=moon></div>
</div>
<div class=celestial-body id=mars></div>
</div>
</div>
</div>
<h3 id="traditional-time">
Traditional time units
</h3>
While the ''s'' and ''ms'' units defined in [[CSS3-VALUES]]
are appropriate for very short durations,
their use to express longer time spans is inadequate.
Moreover, authors may sometimes wish to use less dry terminology
and prefer more expressive and vivid language. This specification
therefore introduces two <<time>> units:
''ftn'' and its subdivision ''mftn''.
<table class="data" export>
<thead>
<tr><th>unit
<th>name
<th>equivalence
<tbody>
<tr><th><dfn>ftn</dfn>
<td>Fortnight
<td>1 ''ftn'' = 1209600 ''s''
<tr><th><dfn>mftn</dfn>
<td>Millifortnight
<td>1 ''ftn'' = 1000 ''mftn''
</table>
<h3 id=speech>
Speech rate</h3>
This specification introduces an new <a spec="css-values">dimension</a>,
together with a new unit to be used with this dimension.
The <dfn id="speech-rate-value"><<speech-rate>></dfn> described the speed at which a text is read aloud.
It can be expressed using the ''tmbl'' unit, as defined below.
<table class="data" export>
<thead>
<tr><th>unit
<th>name
<th>definition
<tbody>
<tr><th><dfn>tmbl</dfn>
<td>Timble
<td>This is the rate of speech of Sir Tim Berners-Lee
when delivering a speech.
</table>
Note: Authors are advised to be cautious when using this unit,
as it can easily lead to rates of speech that are too high
for the listener to follow.
''1tmbl'' is generally considered to be about
the maximum rate a listener without special training can sustainably understand
while paying close attention.
Consider reducing the speed when the audience is distracted, tired,
or comprises many non-native speakers.
These factors are cumulative.
For dictation or during meetings for which live minutes are taken,
a rate of 0.3tmbl is more appropriate.
Issue: For languages other than English, should ''1tmbl'' be defined as
the same number of words per minute as ''1tmbl'' in English?
This seems problematic as we do not have a precise definition for <em>word</em>,
and because average word length can vary significantly per language.
Alternatively, defining ''1tmbl'' as
the speed at which Tim Berners-Lee speaks in that language
is also problematic,
given that there are languages that He does not speak at all.
Tim Berners-Lee has provided an alternative definition of the timble,
<a href="http://schepers.cc/timble">as documented by Doug Schepers</a>:
<q>speech at more than 1 timble is difficult to understand;
speech below 1 timble is simply boring</q>.
Doug himself defines it as
<q>the uppermost rate of speech
at which a normal person
can understand what’s being said in their native language</q>.
<h4 id="voice-rate-ext">
Extension to the 'voice-rate' property</h4>
This specification extends the 'voice-rate' property, so that the ''tmbl'' unit can be used.
<pre class="propdef partial" noexport>
Name: voice-rate
New values: [normal | x-slow | slow | medium | fast | x-fast | <<speech-rate>>] || &lt;percentage&gt;
</pre>
Issue: Should negative values be allowed for <<speech-rate>> for reversed speech?
<h2 id="rainbow">
Double Rainbow</h2>
<<gradient>> allows sophisticated visual effects,
but they are tedious to write, review and maintain
as non trivial gradients cannot easily be visualised by merely reading the source.
This specification introduces a new syntax to describe a particular kind of <<radial-gradient()>>: double rainbows.
This spectacular visual effect which would improve most web pages
is currently underused due to the difficulty of specifying it correctly.
The <<gradient>> syntax is extended to accept <<double-rainbow()>> in addition to the other values defined in [[!CSS4-IMAGES]]
<pre>
<dfn>double-rainbow()</dfn> = double-rainbow(
<<position>> [, [ <<extent>> | <<length>> | <<percentage>>]]?
)
<dfn noexport><<extent>></dfn> = ''closest-corner'' | ''closest-side'' | ''farthest-corner'' | ''farthest-side''
</pre>
<<length>> or <<percentage>> gives the radius of the outermost circle of the double rainbow explicitly.
Percentages values are relative to the corresponding dimension of the gradient box.
Negative values are invalid.
If the second argument is omitted, the default value is ''farthest-side''.
<div class="example" id="rainbow-unicorn">
This feature was initially introduced by Opera Software.
The following page, when viewed in Opera (between version 11.60 and 12.16),
demonstrates tasteful use of double rainbows:
<a href="http://media.opera.com/media/press/2011/unicorn/">http://media.opera.com/media/press/2011/unicorn/</a>
By combining ''double-rainbow()'' with <a href="https://fetch.spec.whatwg.org/#unicorn">about:unicorn</a> [[FETCH]],
modern web standards can be used to achieve a similar effect.
<pre><code class="lang-markup">
&lt;img src="about:unicorn"
style="background: double-rainbow(bottom, closest-corner)">
</code></pre>
<img class=fabulous src="./unicorn.svg">
<style>
.fabulous {
background: radial-gradient(closest-corner circle at bottom, transparent, rgba(250, 250, 210, 0.251) 63%, rgba(148, 0, 211, 0.251), rgba(0, 0, 128, 0.251), rgba(0, 0, 255, 0.251), rgba(0, 128, 0, 0.251), rgba(255, 255, 0, 0.251), rgba(255, 165, 0, 0.251), rgba(255, 0, 0, 0.251), transparent 67%, transparent 90%, rgba(255, 0, 0, 0.126), rgba(255, 165, 0, 0.126), rgba(255, 255, 0, 0.126), rgba(0, 128, 0, 0.126), rgba(0, 0, 255, 0.126), rgba(0, 0, 128, 0.126), rgba(148, 0, 211, 0.126), transparent 100%);
max-width: 500px;
display:block;
margin-left: auto;
margin-right: auto;
}
</style>
</div>
<h2 class=no-num id="acknowledgments">
Acknowledgments</h2>
Thanks especially to the following people for their ideas, feedback, and experimental implementations (in alphabetical order by first name):
Anne van Kesteren,
Bruce Lawson,
Chris Mills,
Doug Schepers,
Daniel Glazman,
Leif Arne Storset,
Paul Verbeek,
Peter Linss,
Tim Berners-Lee (assuming the quotation by Doug correctly records what Tim said).