User:Sevgi/CSSTimeline

w3c css^[1]

This is the wiki page for the Timeline project for Special Issue 26 by Kim, Feline and Sevgi. We wanted to create an alternate narrative of the W3C/CSS/HTML developments, parsing through the public archives by interest. We used search engines provided by the consortium as well as caniuse.com to determine specific property implementations. Our main focus was to look into display and position properties (where we are situated + what is our state).

We want to create a physical timeline where these interesting correspondences - a spec sheet/working draft/editors draft or a press release or an email- are a part of the timeline generated by the etherpad of important events we listed.

Here are our pads:https://pad.xpub.nl/p/timeline

https://pad.xpub.nl/p/timelinethoughts2025

Process

Protocol for Collecting Events & Process

Feline started collecting events and going through all the spec sheet by hand(by search engine) and reading through the mailings to see what is the earliest mentions of the properties she came across. This revealed a great email by Håkon W Lie: here marking the start of Cascading Style Sheets. She handled a lot of important events of W3C, and position stuff.

Sevgi started looking into the mailings, protocols and was interested in the protocols of 'being a W3C contributing member'. She handled display and color properties. Also some documentation and note taking.

Code

here is a link to the current version on cereal box

first draft of print pdf

Kim started working on the timeline from the timeline pad, with YAML. How does the code work? ->

We are using an Etherpad as Backend or small Database. On the Etherpad, every event is formulated in Yaml, a markup language that Javascript can understand.
We can export any Etherpads plain text by adding this '/export/txt' to its url

JS

In our Javascript we are making a fetch request to get the plain text content from the etherpad.
Embedding this Library allows us to parse (means reading and converting) the yaml content with Javascript
First sort our events by date
We convert the Yaml date into a Javascript date format
Next we calculate the position of events on the timeline and their distance to another
Get the whole timespan by calculating:

let timespan = lastDate - firstDate;

for each event get the years difference from the first year:

let diff = year - firstDate;

convert to percent:

let percent = diff/timespan * 100;

and pass it as styling to the event element

div.style.top = percent + '%';

add the events contents from the parsed yaml to its event container with div.innerHTML:

"<time>" + event['date'] + "</time>" + " <p class='text'><span>" + event['title'] + "</span>" + " <span>" + event['quote'] + "</span></p>";

events that have the type 'e-mail' or 'period' are styles slightly different

CSS

the parent container of all events is positioned absolute and rotated:

   transform: rotate(-90deg);
   position: absolute;
   transform-origin: left top;

each event inside of its parent is positioned relative

Notes

From Timeline ether pad:

# add date for CSS1,2,3

# was position part of css1 ? was everything just static before css2?

# is the position property proposal date the same as css2?

# All CSS version (1, 2, 3) both official recommendation and first draft

# The modules that handle Display and Position, we want all their official recommendation and first draft for each versions

# Keywords, for each value of both display and position, official recommendation and first draft of when they were introduced

Feedback / Meeting Notes

10.03.2025:

Manetta says the disordered timeline of 'updates' is as interesting as the regular order of a timeline. What does it mean to have published an update to CSS when it comes to seeing it/using it on a website or while building a website. Who decides on the web browser adaptation of CSS and how it looks?

Browser implementation and how does that relate to the timeline?

--webkit

What is interesting about the timeline? Could we be the timeline research group instead of making a timeline? How could we publish it in a way that creates space to articulate more on the research?

how do we narrate the timeline and how do we talk about CSS implementations through time? how does our narrative effect the story of CSS?

who is the audience? is it our study object and research? think about the audience later? when the pub comes along?

Event/Space Meeting & Planning

maybe one linear timeline with the official stuff from the W3C and then annotading the other stuff onto that

or more like a room installation with printed sheets connected by thread

webside wise: different timelines ( the W3C stuff, and the other stuff) and then being able to sort of layer them? and

categories to make our timeline?

different colours for different categories?

what are we aiming for > why not graphviz? we organise everything by hand, show and allow for messiness, make it readable,

what is interesting to show? here is the --webkit , here is the official documentation, what is the gap of implementation, why is it there?

what came before the official draft/snapshot, etc.?

could we have the -web-implementation as time-spans instead of indv. events? could a web implementation ´xist in a period of time instead of a spot on the line?

mark beginnings and let the implementation be visualised through periods

how do we show it in Page Not Found?

- Big map on the wall?

- Fold-outs through the timeline! We love this idea. This is an alternative way to show relations and create an engaging timeline.

- some web moment?

WEBSITE:

- emails go on the timeline as a line?

- an Event is a publication/public declaration of the W3C

- earlier implementations become periods on top of the timeline, change type to webkit

TIMELINE PAD:

- specify type for every Event

- start printing e-mails already

- first mention of Declaration, first publication of it, if there is the earlier implementations of it

- archive the printed material!

- print emails on colourful paper? -> highlightable paper! Yellow

TO PRESENT DURING THE EVENT:

- We print the website, use the plotter to print, hand place emails and highlight them , place them on the timeline by hand.

- We collect emails and documents to print and start already so we don't have a load of work closer to the event.

- How do we make the fold-outs? envelopes, folding?

- What do we call it? tracing back css?

TO DO:

- Buy paper, highlighters

- Continue research

- Make prototype! Try out pen/plotter?, see folding ideas

18.03 meeting w WHODUNIT:

-cross reference with WHODUNIT group?

-more things to add onto the timeline I dont think we necessarily need more content but edit it a bit so we see if something we want in there is missing

-more content needed: periods-> add more specifically looking at the webkit implementations using CANIUSE

-what kinda content are we putting there? for now: descr, quotes

-on timeline: DATE & TITLE

-to print: QUOTES on DOCUMENTS!

- accuracy in time: not accuracy bureaucratically

- not everything everything

- deadlines: next week 24? -> make a dummy by then :

- get paper (A4, yellow, pink?)

- print emails

- print timeline? -> plot?

-Timeline Wiki make! > https://pzwiki.wdka.nl/mediadesign/User:Sevgi/CSSTimeline

- WHODUNIT wants to make a stack of paper cards that show the company names as tags(color coded)

- every card would say: title, abstract, qr code

- from paper to database to paper database

- number of people involved?

- properties left behind?

Tool that shows the differences in between drafts and the progression of the development, what is left behind, what is kept:

https://services.w3.org/htmldiff?doc1=&doc2=https%3A%2F%2Fwww.w3.org%2FTR%2FWD-CSS2-971104%2Fcover.html

- Fred doesn't want to make an infographic

- 'the work is the work not the description'

- a lot of info and a lot of different properties of information-> more bonds could be created

- whodunit style?? red thread cork board

- not original?

Prototype

Prototype V1

after printing is all out:

– now A4 – needts to be gigger – at least A3 (print out and see)

– all the specs and emails printed out – doesnt really work to glue them to a wall – rather hang them on a thread and make little booklets out of them

– maybe the threads can be the colorcode?

– create hirachy through sizes – timeline bigger – emails in comparison smaller (maybe A5 as they are now)

– still colored paper? – eather paper or thread

– make a line out of wood? with wholes? to hang the specs ?

– maybe print the time and then see-trough plexiglas?

––– how do we put that on the wall then?

– what can we do to improve the look of just printed paper on the wall? – would be sooo nice to just have plexiglas and then "sticker-text" on the wall.