CSSTemplateLayoutModule

W3CWorkingDraft2April2009
Thisversion: http://www.w3.org/TR/2009/WDcss3layout20090402 Latestversion: http://www.w3.org/TR/css3layout Previousversion: http://www.w3.org/TR/2007/WDcss3layout20070809 Editors: BertBos(W3C)bert@w3.org
Copyright2009W3C(MIT,ERCIM,Keio),AllRightsReserved.W3Cliability,trademarkand documentuserulesapply.

Abstract
CSSisasimple,declarativelanguagefor creatingstylesheetsthatspecifythe renderingofHTMLandotherstructured documents.Thisspecificationispartof level3ofCSS(CSS3)andcontains featurestodescribelayoutsatahigh level,meantfortaskssuchasthe positioningandalignmentofwidgetsin agraphicaluserinterfaceorthelayout gridforapageorawindow,inparticular whenthedesiredvisualorderisdifferent fromtheorderoftheelementsinthe sourcedocument.OtherCSS3modules containpropertiestospecifyfonts,colors, textalignment,listnumbering,tables,etc. Thefeaturesinthismoduleare

Figure1.Agridwithfourslotsdefined by display:"aaaaaaa""bccccdd" .

describedtogetherforeasierreading,but areusuallynotimplementedasagroup.CSS3modulesoftendependonother modulesorcontainfeaturesforseveralmediatypes.Implementersshouldlookatthe variousprofilesofCSS,whichlistconsistentsetsoffeaturesforeachtypeofmedia.

Statusofthisdocument
Thissectiondescribesthestatusofthisdocumentatthetimeofitspublication.Other documentsmaysupersedethisdocument.AlistofcurrentW3Cpublicationsandthe latestrevisionofthistechnicalreportcanbefoundintheW3Ctechnicalreportsindex athttp://www.w3.org/TR/. PublicationasaWorkingDraftdoesnotimplyendorsementbytheW3C Membership.Thisisadraftdocumentandmaybeupdated,replacedorobsoletedby otherdocumentsatanytime.Itisinappropriatetocitethisdocumentasotherthan workinprogress. The(archived)publicmailinglistwwwstyle@w3.org(seeinstructions)is preferredfordiscussionofthisspecification.Whensendingemail,pleaseputthetext css3layoutinthesubject,preferablylikethis:[css3layout]summaryof comment ThisdocumentwasproducedbytheCSSWorkingGroup(partoftheStyle Activity). Thisdocumentwasproducedbyagroupoperatingunderthe5February2004 W3CPatentPolicy.W3Cmaintainsapubliclistofanypatentdisclosuresmadein connectionwiththedeliverablesofthegroupthatpagealsoincludesinstructionsfor disclosingapatent.Anindividualwhohasactualknowledgeofapatentwhichthe individualbelievescontainsEssentialClaim(s)mustdisclosetheinformationin accordancewithsection6oftheW3CPatentPolicy. ThismodulewasoriginallycalledCSSAdvancedLayout.Otherchangessincethe 2007draftinclude:Thesectionontabbeddisplay(stackofcards)hasbeendropped, becauseitdoesn'thavethesamepriority.Twoadditionalkindsofintrinsicwidths (mincontentandfitcontent)andawaytosetaminimumandmaximumwidthfora columnwereadded.Thesizecalculationsforslotsaremorepreciseandanote mentionsthepossibleadditionofaflexibilityparametertotweakthealgorithm. ThesectiononCRexitcriterialistssomeconditionsforthisspecificationto becomeaW3CRecommendation.

Tableofcontents
1 2 Dependenciesonothermodules Introduction

3 4 5 6 7 8 9 10 11 12 13 14

Declaringtemplates:the display property Computingthewidthoftheslots Computingtheheightoftheslots Flowingcontentintothetemplate:the position property The ::slot() pseudoelements Verticalalignment Pagebasedtemplatesandothertemplatesinpagedmedia Stackingorder Floatingelementsinsidetemplates Definitionofthe gr unitinatemplateelement CRexitcriteria History Acknowledgments References Index

1Dependenciesonothermodules
ThisCSS3moduledependsonthefollowingotherCSS3modules: CSSsyntaxmodule[CSS3SYN]interactivevsnoninteractivemedia. CSSvaluesandUnitsmodule[CSS3VAL]<string>and<length>. CSSboxmodule[CSS3BOX]propertieswidth,height,float,displayand overflow CSStext[CSS3TEXT]propertiesdirectionandblockprogressiondirection CSSpositioning[CSS3POS]propertyzindex CSSpagedmedia[CSS3PAGE]propertiespagebreakbefore,pagebreak afterandpagepagearea(inparticularitswidth&height). CSSbackgroundandborders[CSS3BG]propertybackground. CSStables[CSS3TBL]propertyverticalalign.[orBoxModule?] Ithasnonnormative(informative)referencestothefollowingotherCSS3modules: Selectors[SELECT] Seesection1.4.2ofCSSlevel2[CSS21]forthegrammarandothernotationsthat thisspecificationusesinpropertydefinitions.

2Introduction
(Thissectionisnotnormative.) ThestylingofaWebpage,aformor agraphicaluserinterfacecanroughlybe dividedintwoparts:(1)definingthe overallgridofthepageorwindowand (2)specifyingthefonts,indents,colors, etc.,ofthetextandotherobjects.Thetwo arenotcompletelyseparate,ofcourse, becauseindentingorcoloringatext influencestheperceivedgridaswell. Nevertheless,whenoneseparatesthe partsofastylethatshouldchangewhen thewindowgetsbiggerfromtheparts thatstaythesame,oneoftenfindsthat thegridchanges(roomforasidebar, Figure2.Fourregions,calleda,b,c extranavigationbar,bigmargins,larger andd,eachreceiveapartofa images),whilefonts,colors,indents, document numberingstyles,andmanyotherthings don'thavetochange,untilthesizeofthe windowbecomesextreme. Thepropertiesinthisspecificationworkbyassociatingalayoutpolicywithan element.Ratherthanlettinganelementlayoutitsdescendantsintheirnormalorder asinlinetextorasblocksoftext(thepoliciesavailableinCSSlevel1),thepolicy definedinthismodule,calledtemplatebasedpositioning,givesanelementan invisiblegridforaligningdescendantelements. BecauselayoutsontheWebhavetoadapttodifferentwindowandpapersizes, therowsandcolumnsofthegridcanbemadefixedorflexibleinsize. Thetypicalusecasesforthesepropertiesinclude: ComplexWebpages,withmultiplenavigationbarsinfixedpositions,areasfor advertisements,etc. Complexforms,wherethealignmentoflabelsandformfieldsmaybeeasierwith thepropertiesofthismodulethanwiththepropertiesfortablesandmargins. GUIs,wherebuttons,toolbars,labels,icons,etc.,arealignedincomplexways andhavetostayaligned(andnotwrap,forexample)whenthewindowis resized. Pageddisplays(e.g.,printedmedia)whereeachpageisdividedinfixedareas fordifferentkindsofcontent. Templatebasedpositioningisanalternativetoabsolutepositioning,which,like absolutepositioning,isespeciallyusefulforaligningelementsthatdon'thavesimple relationshipsinthesource(parentchild,ancestordescendant,immediatesibling).

Butincontrasttoabsolutepositioning,theelementsarenotpositionedwiththehelp ofhorizontalandverticalcoordinates,butbymappingthemintoslotsinatablelike template.Therelativesizeandalignmentofelementsisthusgovernedimplicitlyby therowsandcolumnsofthetemplate.Atemplatedoesn'tallowelementstooverlap, butitprovideslayoutsthatadaptbettertodifferentwidths. Themappingisdonewiththepositionproperty,whichspecifiesinthiscaseinto whichslotofthetemplatetheelementgoes.Thetemplateitselfisspecifiedonthe displaypropertyofsomeancestoroftheelementstoremap.

E ampleI

Inthisexample,thefourchildrenofanelementareassignedtofourslots(calleda, b,candd)ina2 2template.(AllmarkupexamplesinthisspecificationareHTML fragments,unlessotherwisestated.)

<tlye"etcs> syetp=tx/s" dipa:"b l{dslya" "d c"} #y1{psto:a} smoiin #a1{psto:b} lboiin #y2{psto:c} smoiin #a2{psto:d} lboiin <sye /tl> <l d> <ti=y1A ddsm> <di=a1Aieaj ddlb>senape <ti=y2B ddsm> <di=a2Biebke ddlb>sdakr <d> /l

Figure3.Eachelementoccupies oneslot.Inthistemplate,allslots havethesamesize.

E ampleII

Templatescanalsohelpwithdeviceindependence.ThisexampleusesMedia Queries[MEDIAQ]tochangetheoveralllayoutofapagefrom3columnlayoutfor awidescreentoa1columnlayoutforanarrowscreen.Itassumesthepagehas beenmarkedupwithlogicalsectionswithIDs.

@eil mdaal { bdipa:"a" oy{dslyaa "c"} bd #ed{psto:a} haoiin #aoiin nv{psto:b} #doitn av{psio:c} #oy{psto:d} bdoiin } @eilnmxwdh0p) mdaalad(ait:50x { bdipa:"" oy{dslya "" b ""} c #ed{psto:a} haoiin #aoiin nv{psto:b} #dipa:nn av{dslyoe}

#oy{psto:c} bdoiin }

E ampleIII

Elementscanbepositionedthisway,butnotmadetooverlap,unlesswith negativemargins.HereishowthezunflowerdesignoftheZenGardencouldbe done:

#otieipa:"b"} cnanr{dslyac #nroiinmriih:ebxsao:05m05m05m} ito{psto:aagnrgt2mohdw.e.e.e #upriget{psto:bohdw.e.e.e spotnTxoiinbxsao:05m05m05m} #ikit{psto:c} lnLsoiin

E ampleIV

Templatebasedpositioningborrowssomeconceptsfromtablelayout,inparticular theideaofaligningelementsinrowsandcolumns,sothattheyconstraineach other'ssize.Buttherearealsodifferences.Thisexampleshowssomeofthem. Assumethisdocumentfragment:

<ils=ru> dvcasgop dvaaaaaa/i> <i>aaaaaa<dv dvbb/i> <i>b<dv dvcasmn>cc<dv <ils=euccc/i> <dv /i>

Wecanlayitoutasthreecolumns,asthefollowingillustrationsshow.Thestyle sheetwouldcontainthefollowing.
.rudslyal} gop{ipa:tbe .ruidslyalel gop>dv{ipa:tbecl}

Figure4.Exampleofrenderingwithatable.

Wecanalsouseatemplate,inwhichcasethestylesheetwouldcontainthis:
.rudslyac} gop{ipa:"b" .ruipsto:a gop>dv{oiin} .ruiipsto:b gop>dv+dv{oiin} .ruiiipsto:c gop>dv+dv+dv{oiin}

Bydefault,thetableisaswideasneededtofititscontents.Tomakesureitisas wideasitscontainingblock,weneedtoadd
.rudslyalwdh0% gop{ipa:tbeit:10}

Thatisnotneededforthetemplate,but,ontheotherhand,ifwewantthetemplate

tofititscontents,wewouldneedtosayso:
.rudslyacwdhiotn} gop{ipa:"b"it:ftcnet

(See[CSS3BOX]forthedefinitionofthewidthproperty.)Thecolumnsofthe templatearebydefaultallthesamesize.Thecolumnsofthetablesatisfycertain constraints,buttheexactsizeisnotdefined.Wecanmakethemallthesameby addingarule(see[CSS3TBL]):

.rudslyalwdh0%alaotie} gop{ipa:tbeit:10tbelyu:fxd

Figure5.Exampleofrenderingwithequalcolumns.

Inbothstyles,wecansetacolumntoacertainsize:
dvmnwdhe} i.eu{it:3m

resp.,
.rudslyace} gop{ipa:"b"**3m

Figure6.Exampleofrenderingwithafixedthirdcolumnandtheothertwo columnsofequalwidth.

Ifthereisanunknownnumberofcolumns(childrenofthediv.groupelement),the stylesheetforthetablemodelwillautomaticallytakethemintoaccount.Thestyle sheetforthetemplatemodel,however,createsatemplateofexactlythreecolumns andcan'thandletableswithanunknownnumberofcolumns.Theextraelements willbeaddedintothedefaultslot(inthiscasetheaslot). Inbothmodels,elementscanhaveborders,butonlyinthetablemodelcan bordersbecollapsed,whichmakessettingbordersalittleeasierinthetable model:

.rudslyalbreolpeolpe gop{ipa:tbeodrclas:clas} .ruibre:sld gop>dv{odroi}

resp.,
.ruibre:sldodrlf:nn} gop>dv{odroibreetoe

.rui:ishlbreetoi} gop>dvfrtcid{odrlf:sld

Inthetemplatemodel,theorderoftheelementsisexplicit,andthusitispossibleto reversetheorderofthecolumns:
.ruipsto:c gop>dv{oiin} .ruiipsto:b gop>dv+dv{oiin} .ruiiipsto:a gop>dv+dv+dv{oiin}

Figure7.Exampleofrenderingwiththecontentsofthethreecolumnsreversed: thethirdelementisshowninthefirstslotandthefirstelementinthethirdslot.

Inthetablemodel,theorderoftherowsandcolumnsisgivenbythedocument sourceandthuscan'tbechanged.
E ampleV

Thisexampleshowsawaytomovenotestotheendofasection.Notesinthis examplereferstoelementsinHTMLwithaclassofnote.AfragmentofHTML suchas

<ils=eto> dvcasscin <>hauiuotrohitetrsa pTeblboscsefteffhsce<pn casnt>Tesxhsceotriitr ls=oehitetrcsesadfe mnn<sa>oholwCruetzsacsenc. ao./pnfTeRloapgmnieotria <> p <dv /i>

withthisstylesheet
dvscin{ i.eto dsly@vial ipa:""aalbe Fvial} ""aalbe .oe{ nt psto:F oiin cnetone(oe.A"cnet otn:cutrnt)"\0otns cutriceetoe onenrmn:nt fniemle} otsz:salr .oe:eoe{ nt:bfr cnetone(oe otn:cutrnt) psto:@ oiin vrialg:spr etclainue fnieagr otsz:lre}

resultsinarenderingsimilartothis:

Figure8.Renderingofatextwithfootnotes.

3Declaringtemplates:thedisplayproperty
Name: Newvalue: Percentages: Computedvalue: display inline?[<string>[/<rowheight>]?]+<colwidth>* N/A specifiedvalue

Anelementwiththisdisplayissimilartoatableelement,inthatitscontentislaidout inrowsandcolumns.Thetwomaindifferencesarethatthenumberofrowsand columnsdoesn'tdependonthecontent,butisfixedbythevalueofthepropertyand thattheorderofthedescendantsinthesourcedocumentmaybedifferentfromthe orderinwhichtheyappearintherenderedtemplate. Ifthekeywordinlineispresent,theelementisaninlinelevelelement, otherwiseitisablocklevelelement[CSS3BOX]. Notethatdisplayisextendedtoapplyto@pagerulesaswellandthatithas adifferentdefaultthere,viz.,"@".SeeTemplatesinpagedmediabelow. Eachstringconsistofoneormoreletters(see<letter>below),atsigns(@), periods(.)andspaces.Eachstringrepresentsonerowinthetemplate,each characterotherthanaspacerepresentsonecolumninthatrow.Spaceshaveno meaning.Theymaybeaddedforreadability. Thesymbolsinthetemplatehavethefollowingmeaning aletter slotforcontent. @ (atsign)defaultslotforcontent. . (period)whitespace. Multipleidenticallettersinadjacentrowsorcolumnsformasingleslotthatspans thoserowsandcolumns.Dittoformultiple@s.Uppercaseandlowercaseare

consideredtobethesameletter(i.e.,thetemplateiscaseinsensitive). Nonrectangularslotsandmultipleslotswiththesameletterareillegal.A templatewithoutanyletteror@isillegal.Atemplatewithmorethanone@slotis illegal.Theseerrorscausethedeclarationtobeignored. Note:nonrectangularanddisconnectedregionsmaybepermittedinafuture updateofCSS. Rowswithfewercolumnsthanotherrowsareimplicitlypaddedwithperiods(.) (thatwillthusnotcontainanyelements). Eachslot(letteror@)actsasablockelementforitscontents. Each<rowheight>setstheheightoftheprecedingrow.Thedefaultisauto.The valuescanbeasfollows: <length> Anexplicitheightforthatrow.Negativevaluesmakethetemplateillegal. auto Therow'sheightisdeterminedbyitscontents.Seethealgorithmbelow. * (asterisk)Allrowswithanasteriskwillbeofequalheight.Seethealgorithm below. Each<colwidth>setsthewidthofacolumn.Iftherearemore<colwidth>sthen columns,thelastonesareignored.Iftherearefewer,themissingonesareassumed tobe*.Each<colwidth>canbeoneofthefollowing: <length> Anexplicitwidthforthatcolumn.Negativevaluesmakethetemplateillegal. * (asterisk.)Allcolumnswitha*havethesamewidth.Seethealgorithmbelow. maxcontent, mincontent Thecolumn'swidthisdeterminedbyitscontents.Seethealgorithmbelow. minmax(p,q) Thecolumn'swidthisconstrainedtobegreaterthanorequaltopandlessthan orequaltoq.pandqstandfor[<length>|maxcontent|mincontent|*].There maybewhitespacearoundthepandq.Ifq<p,thenqisignoredand minmax(p,q)istreatedasminmax(p,p). fitcontent Equivalenttominmax(mincontent,maxcontent). Notethatitislegaltospecifynowidthsatall.Inthatcase,allcolumnshavethe samewidth. Theorientationofthetemplateisindependentofthewritingmode(direction andwritingmodeproperties):thefirststringisthetopmostrowandthefirstsymbol ineachstringistheleftmostcolumn.

E ampleVI
<tlye"etcs> syetp=tx/s" dv{dsly.a.b"} iipa:"a.b. plfoiin .et{psto:a} prgt{psto:b} .ihoiin <sye /tl> <i> dv <ls=etLfoun pcaslf>etclm <ls=ih>ihoun pcasrgtRgtclm <dv /i>

Anelementwithatemplatevalueforitsdisplaypropertyiscalledatemplate element.Anelement'stemplateancestorisdefined(recursively)asfollows: iftheelementhasposition:fixed,position:absolute,avalueoffloatthatisnot noneortheelementistherootelement,thanithasnotemplateancestor. else,iftheelement'sparenthasatemplateasitsdisplay,thenthatparentisthe element'stemplateancestor. else,theelement'stemplateancestoristhesameasitsparent'stemplate ancestor.

4Computingthewidthoftheslots
First,theintrinsicminimumandintrinsicpreferredwidthsaredefinedasfollows: Acolumnwitha<colwidth>ofagiven<length>hasintrinsicminimumand intrinsicpreferredwidthsbothequaltothat<length>. Acolumnwitha<colwidth>of*hasaninfiniteintrinsicpreferredwidth.Its intrinsicminimumwidthis0. Acolumnwitha<colwidth>ofmincontenthasanintrinsicminimumwidthand intrinsicpreferredwidththatarebothequaltothelargestoftheintrinsicminimum widthsofalltheslotsinthatcolumn: Theintrinsicminimumwidthofa.is0. Theintrinsicminimumwidthofaletteror@is0ifthatslotspanstwoor morecolumnsotherwise,itistheintrinsicminimumwidthasdefinedby [CSS3BOX].Forthepurposeofthatdefinition,theslotisconsideredasa blockwithablockprogressiondirectionoftbwithitscontentsasits children. Acolumnwitha<colwidth>ofmaxcontenthasanintrinsicminimumwidthand intrinsicpreferredwidththatarebothequaltothelargestoftheintrinsicpreferred widthsofalltheslotsinthatcolumn: Theintrinsicpreferredwidthofa.is0. Theintrinsicpreferredwidthofaletteror@istheintrinsicpreferredwidth asdefinedby[CSS3BOX].Forthepurposeofthatdefinition,theslot(which

mayspanseveralcolumns)isconsideredasablockwithablock progressiondirectionoftbwithitscontentsasitschildren. Acolumnwitha<colwidth>ofminmax(p,q)hasanintrinsicminimumwidth equaltopandanintrinsicpreferredwidthequaltoq. Next,thelayoutalgorithmdistinguishesbetweenelementswithandwithoutana prioriknowncontentwidth. Thewidthisn'tknownapriori,if,e.g.,widthisautoandtheelementis floating,absolutelypositioned,inlineblockorachildofablockwithverticalwriting mode. Iftheelementhasanaprioriwidth: Ifthesumoftheintrinsicminimumwidthsofthecolumnsislargerthanthe element'swidth,eachcolumnissettoitsintrinsicminimumwidthandthe contentswilloverflow(seeoverflow). Ifthesumoftheintrinsicminimumwidthsofthecolumnsislessthanor equaltotheelement'swidth,thecolumnsarewideneduntilthetotalwidthis equaltotheelement'swidth,asfollows:allcolumnsgetthesamewidth, exceptthatnocolumnorspanofcolumnsmaybewiderthanitsintrinsic preferredwidth.Ifthecolumnscannotbewidenedenough,thetemplateis leftorrightalignedintheelement'scontentarea,dependingonwhether directionisltrorrtl,respectively. Note:InafutureupdateofCSS,columnsmightgetapropertytoallowthem someflexibilitytobecomewiderthantheirintrinsicpreferredwidthundercertain conditionsorbyacertainamount. Iftheelementdoesn'thaveanaprioriwidth: Ifthesumoftheintrinsicminimumwidthsofthecolumnsiswiderthanthe initialcontainingblock,eachcolumnissettoitsintrinsicminimumwidth. Theelement'susedwidthisthesumofthewidthsofthecolumns. Ifthesumoftheintrinsicminimumwidthsofthecolumnsislessthanor equaltothewidthoftheinitialcontainingblock,thecolumnsarewidened untilthetotalwidthisequaltotheinitialcontainingblock,asfollows:all columnsgetthesamewidth,exceptthatnocolumnorspanofcolumnsmay bewiderthanitsmaximumintrinsicwidth.Theelement'susedwidthisthe sumofthewidthsofthecolumns. Notethatthewidthsofthecolumnscanbecompletelydeterminedbeforelayingout anyofthecontentsaslongastherearenocolumnswitha<colwidth>ofmin contentormaxcontent.

5Computingtheheightoftheslots

Theheightofthetemplateisthesmallestpossibleunderthefollowingconstraints: 1. Rowswithaheightsetto<length>havethatheight. 2. Norowhasanegativeheight. 3. Allrowswithaheightsetto*arethesameheight. 4. Everysequenceofoneormorerowsofwhichatleastonehasaheightsetto autoisatleastashighaseveryletteror@slotthatspansexactlythat sequenceofrows. 5. Ifthecomputedvalueoftheelement'sheightisauto,theneverysequenceof oneormorerowsofwhichatleastonehasaheightsetto*isatleastashigh aseveryletteror@slotthatspansexactlythatsequenceofrows. 6. Thewholetemplateisatleastashighasthecomputedvalueoftheelement's height,unlessthatvalueisauto,orunlessallrowshaveaheightsetto <length>. Ifthetemplateishigherthantheelement'sheight,theelementoverflows,see overflow. Note:InafutureupdateofCSS,rowsmightgetapropertytospecifyhowthe heightofthatrowisadjustedincasetheabovecalculationyieldsatemplatethatis lesstallthantheelementitself. Theheightofaslotismeasuredasiftheslothadoneanonymousblockasa childthatcontainsalltheslot'scontents,andboththeslotandtheanonymousblock haveablockprogressiondirectionoftbandtheanonymousblock'sheightis computedasaflowroot(seeAutoheightsforflowrootsin[CSS3BOX]).Roughly, thismeanstheheightisfromthetopmarginedgeofthetopmostelementtothe bottommarginedgeofthebottommostelementorofthebottommostfloat.
E ampleVII

Thisexampledividesthewindowinthreerowsandthreecolumns,separatedby 1emofwhitespace.Themiddlerowandthemiddlecolumnareflexible,theothers arefixedataspecificsize.Thefirstcolumnis5emwide,thelastone10em.

<tlye"etcs> syetp=tx/s" bd oy{ hih:10 egt0% dslya.b.c/e ipa:""2m ...../e ""1m d.e.f "" ...../e ""1m g.h.i/e ""2m ee*e0m 5m1m1m1e} #oo{oiin} lgpsto:a #otpsto:b mto{oiin} #ae{oiin} dtpsto:c #an{oiin} mipsto:e #dpsto:f av{oiin} #oy{oiin} cppsto:g #bupsto:h aot{oiin} <sye /tl>

<dlg>igsc.. pi=oo<mr=. <dmtoMkneaeic82 pi=ot>aigWbpgssne16 <ddt>uut204 pi=aeAgs,20 .. .

6Flowingcontentintothetemplate:thepositionproperty
Name: Newvalue: Percentages: Computedvalue: position <letter>|same N/A <letter>orstaticseetext

Thisvalueofthepositionpropertyspecifiesintowhichrowandcolumnofatemplate theelementisplaced.The<letter>mustbeasingleletter,withcategoryLu,LlorLt inUnicode[UNICODE]),ora@symbol. <letter> Theelementistakenoutoftheflowofitsparentandputintothespecifiedslotin itstemplateancestor.Ifthereisnoslotofthatname,thecomputedvalueis static. same Avalueofsameinsteadofalettercomputestothesameletterasthemost recentelementwithaletteraspositionthathasthesametemplateancestor.If thereisnosuchelement,thevaluecomputestostatic. Thecontainingblockofanelementwithoneofthesevaluesforpositionistheslotin thetemplateintowhichitisflowed. Multipleelementsmaybeputintothesameslot.Theywillbelayedout accordingtotheirdisplaypropertyintheordertheyoccurinthesourcedocument. Thecontentofatemplateelementisputintheslotmarkedwith@s.Ifthereis nosuchslot,thecontentisputinthefirst(leftmost)slotonthefirstrowthatdoesn't consistofonly..
E ampleVIII

AcommonmarkupinHTMLforillustrationswithcaptionsisasfollows:
<ils=iue dvcasfgr> p<mr=pu.p"at"." <>igsc"aljgl=..> pcascpinApnnapagonnAsedm <ls=ato>odilyrudimtra <dv /i>

Thecaptioncanbeputabovetheimagebyusingatemplateasfollows:
dvfgrdslyaa i.iue{ipa:"a" .. "b" iotn} *mncnet*

dvfgrpsto:b i.iuep{oiin} dvfgr.atopsto:aetainetr i.iuepcpin{oiintxlg:cne}

Thecaptioncanbewiderthantheimageandtheimagewillbecentered. Whenthefigureisfloating,itisprobablybettertonotletthecaptionbecome widerthantheimage(unlessthecaptioncannotbemadenarrowenough):

dvfgrfotihdslyabiotn} i.iue{la:rgtipa:""""mncnet dvfgrpsto:b i.iuep{oiin} dvfgr.atopsto:aetainetr i.iuepcpin{oiintxlg:cne}

E ampleIX

Inthisexample,aformislaidoutonagrid,withtwolabelsandtwoinputboxes andasubmitandaresetbutton:
fr om{ bre:tioi odrhnsld dslyaa.bb ipa:"aabb" ..... "...." cc.dd "ccdd" ..... "...." ..e.f ".e.f"} lblfrmn]{psto:a} ae[o=ivoiin iptmnoiindslylc nu#iv{psto:bipa:bok} lblfrmx]{psto:c} ae[o=avoiin iptmxoiindslylc nu#av{psto:dipa:bok} ipttp=umtoiindslylc nu[yesbi]{psto:eipa:bok} ipttp=ee]{psto:fipa:bok} nu[yerstoiindslylc

HereisthefragmentofHTMLthatthestyleisappliedto:
<omato=." frcin"/> <aeo=ivEtrmnmmvle<lbl lblfrmn>neiiuau:/ae> <nudmnaemn> ipti=ivnm=iv <aeo=avEtrmxmmvle<lbl lblfrmx>neaiuau:/ae> <nudmxaemx> ipti=avnm=av <nuyesbiau=O" ipttp=umtvle"K> <nuyerstvle"ee" ipttp=eeau=Rst> <fr> /om

Theadditionofdisplay:blockcausestheformcontrolstousethewidth computationofblocks,inotherwords:theywillbeaswideastheircontaining block,whichinthiscasemeansthattheywillbeaswideastheslottheyare assignedto.Withoutit,theywouldbeinlineelementsandjustbeleftalignedin theirslots.

Figure9.Possiblerenderingoftheexample.

E ampleX

Thisexampleshowsthattemplatescanbenested.Thebodyhastwocolumns. The#contentelementthatgoesintothesecondcolumnhasitselfanother template,intowhichthevariousmodulesareplaced.

Figure10.Possiblerenderingofthenestedtemplates.(Thebordersareaddedfor clarity,theydon'toccurinthestylerulesbelow.Theredborderistheinner template.)

Forclarity,theinnertemplateusesdifferentlettersfortheslotsthantheouter template.Thisisnotrequired.
<tlye"etcs> syetp=tx/s" bd oy{ ipa:"" dslyab 1e 0m* } #a nv{ oiin psto:a } #otn cnet{ oiin psto:b ipa:" dslyc.d.e" "/e ....."1m

" ..f.." 1m1m *e*e* } .ouenw mdl.es{ oiin psto:c } .ouesot mdl.prs{ oiin psto:d } .oueproa mdl.esnl{ oiin psto:e } #ot{ fo oiin psto:f } <sye /tl> <oy bd> <li=nv> ud"a" l>aiain/i <invgto<l> <u> /l <id"otn" dvi=cnet> <ils=mdles> dvcas"ouenw" h>ete<h> <3Wahr/3 pTeewlewahr/> <>hrilbete<p <dv /i> <ils=mdlprs> dvcas"ouesot" h>otal/3 <3Fobl<h> pPoliefobl./> <>epelkotal<p <dv /i> <ils=mdlprs> dvcas"ouesot" h>hs<h> <3Ces/3 pTeewsabalahhsoraet/> <>hrarwttecestunmn<p <dv /i> <ils=mdlesnl> dvcas"oueproa" h>orHrsoe/3 <3Yuoocp<h> pYuronode(vnuly./> <>o'egigtieetal)<p <dv /i> <d"ot>oyihoefls/> pi=fo"Cprgtsmok<p <dv /i> <bd> /oy

E ampleXI

ThisexampleshowstheuseofsametoputD elementsinthesameslotasthe D precedingD . T

.. . Ddslyabc*2m*2m* L{ipa:".."ee} D.ieapsto:a Tmnrl{oiin} D.nml{oiin} Taiapsto:b D.lnpsto:c Tpat{oiin} Dpsto:smmriete} D{oiinaeagnlf:1m .. . <L D> Dl =nmlflo <Tca aia>acn D>hsbrfpe.. <DTiidory.

Dl =nmlrbi <Tca aia>abt D>oaetuat.. <DLclrsarns. Dl =iea>rnt <Tca mn lgaie D>hsrccus. <DTiokocr.. Dl =ln>lv <Tca pa oie D>hrif. <DTefuto.. Dl =iea>ietn <Tca mn llmsoe D>okcmoef. <DArcopsdo.. Dl =ln>ie <Tca pa pn D>hetraf. <DTewsenhl.. <D> /L

Figure11.PossiblerenderingoftheD list,withitemssortedintothreecolumns.

7The::slot()pseudoelements
Theslotsofatemplateelementcanbeindividuallyaddressedwiththe slot() pseudoelement.
E ampleXII

Forexample,thefollowingsetsthecolorandverticalalignmentofsomeofthe slotsinatemplate:
bdipa:"a" oy{dslyaa "c"} bd bd:so(){bcgon:#F oy:ltbakrudF0} bd:so()oy:ltdetclainotm} oy:ltc,bd:so(){vrialg:bto

A::slot(X)pseudoelementselectstheslotwithnameX(aletteror@)ofthe subjectofaselector.Ifthatsubjectisnotatemplateelement,orifithasnosuchslot, thepseudoelementselectsnothing.(I.e.,thesecasesarelegalselectors,theyjust happentomatchnothing.) Onlythefollowingpropertiesapplytotheslot()pseudoelement:

Allbackground*properties(includingthebackgroundshorthand). verticalalign Theoverflowproperty. Thebackgroundofaslotisdrawnimmediatelyontopofthebackgroundofthe templateelementitself.

8Verticalalignment
Theverticalalignpropertyofa::slot()pseudoelementcanbeusedtoalign elementsverticallyinaslot.Theeffectisasifthehypotheticalanonymousblockthat containstheslot'scontentsispositionedasfollows: bottom Thecontentoftheslotisalignedtothebottomoftheslot:thebottommargin edgeoftheanonymousblockcoincideswiththebottomoftheslot. middle Thecontentoftheslotisverticallycenteredintheslot:thedistancebetweenthe topmarginedgeoftheanonymousblockandthetopoftheslotisequaltothe distancebetweenthebottommarginedgeoftheanonymousblockandthe bottomoftheslot. (Notethatifthecontentoverflowstheslot,itwilloverflow bothatthetopandatthebottom.) baseline Theanonymousblockthatenclosesthecontentisplacedashighaspossible undertwoconstraints:(1)Thetopmarginedgeoftheanonymousblockmaynot behigherthanthetopedgeoftheslot.(2)Thetopmostbaselineinthecontent maynotbehigherthanthetopmostbaselineofcontentinanyotherslotinthe samerowthatalsohasverticalalign:baseline.Baselinesofcontentinside floatsarenottakenintoaccount.Slotsthatspanseveralrowsareconsideredto occurintheirtopmostrow. Forallothervalues,thecontentistopaligned:thetopmarginedgeoftheanonymous boxcoincideswiththetopedgeoftheslot.

9Pagebasedtemplatesandothertemplatesinpagedmedia
Atemplatecanalsobeattachedtoapage,ratherthananelement.Suchatemplate iscalledapagebasedtemplate. Thedifferencebetweenpagebasedlayouttemplatesandelementbasedones isthatthesizeofaslotinapagebasedlayouttemplateonlydependsonthe templateandthepagesize,neverontheintrinsicsizeofthecontent.

Anotherdifferenceisthatcontentthatoverflowsaslotmaycauseapagebreak: therestofthecontentisputonanotherpage.Seebelow. Thesyntaxofapagebasedtemplateisthesameasthatofanelementbased one,butthedeclarationappearsinan@pageruleandany<colwidth>or<row height>thatisneither*nora<length>istreatedasifitwere*. Althoughtheoccurrenceofkeywords,suchasfitcontentorauto,isvalid andwelldefined,aUA,especiallyaneditor,maywanttoissueawarning,because thosekeywordsdon'thaveanyusefulfunctioninpagebasedtemplates.

E ampleXIII
@ae:isipa:"b""e"} pgfrt{dslyacdf @ae{dslydf pgipa:"e"} bdpsto:e oy{oiin} hpsto:b 1{oiin}

Thedefaultdisplayvalueofapageisdisplay:"@".
E ampleXIV

Thefollowingruleistypicallynotneeded,becauseitisthedefault:
@ae{dsly@ pgipa:""}

TheheightoftheslotsinatemplateiscomputedasinthesectionComputingthe heightoftheslots,exceptthatthepagearea'sheight[CSS3PAGE]isusedinstead oftheelement'sheight.Similarly,thewidthoftheslotsiscomputedasinthesection Computingthewidthoftheslots,butwiththepagearea'swidthreplacingthe element'swidth. Notethatcertainrulesinthosesectionsareneverapplied,becausethepage area'swidthandheightarealwaysknownaprioriandthewidthandheightofslotsis alwaysa<length>or*. Ifaslotofapagebasedtemplateonnoninteractivemediahasanoverflow propertyofvisible,thencontentthatoverflowsthatslotintheblockprogression direction(i.e.,belowtheslotinthecaseofhorizontaltext)causesapagebreakandis continuedonthenextpage.[Whathappensinnoninteractivemediawithan overflowofscrollorauto?] Forpagebreakingpurposes,eachslotisconsideredasapageandthepage breakpropertiesontheelementsinthatslotdeterminewherethecontentforthatslot isbroken.Contentafterthepagebreakisputintheslotofthesamenameonthenext pagethathassuchaslot.Ifthereisnosuchpagethecontentafterthepagebreakis notdisplayed?displayedinthedefaultslot? Notethatthismayhappenifthetemplateforthefirstpage(@page:first)uses aletterthatoccursinnoother@pagerule.Possiblyalsoifapagetemplateisbound toanamedpage[CSS3GCPM]andthatnamedpageisnotallowedtorepeat.(At

thetimeofwriting,thisisonlyaproposalintheGCPMModule.) NotethatanelementAthatappearslaterinthedocumentthananelementB maythusbedisplayedonanearlierpagethanelementB,becausetheirrespective slotsarebrokenacrosspagesindifferentways. Becauseoflimitationsofadevice(e.g.,limitedmemory),itmaybethataUAhas toprintapage(forcepagebreaks)eventhoughsomeslotsaren'tfilledyet.

E ampleXV

Thisexampleshowshowthefirstpagemayhaveadifferentlayoutfromtheother pages.Theslotaonlyoccursonthefirstpage.Ifthecontentforthatslot(inthis case:allH1elements)istoolong,theremainingcontentofthatslotwillnotbe displayed.Theslot@occursonnormalpagesandallitscontentcanthusbe displayedbyaddingadditionalpages.

@ae:isipa:""""} pgfrt{dslya@ @ae{dsly@*Tistedfut* pgipa:""/hsiheal/} hpsto:a 1{oiin}

Elementbasedtemplatesinpagedmediamaybebrokenacrosspages,subjectto thepagebreakproperties.InadditiontothebreakpointslistedinthePagedMedia module[CSS3PAGE],apagebreakmayoccurbetweentworowsinatemplate,if thereisapossiblebreakpointatthesameheightorhigherinallslotsthatspanthose tworowsandapagebreakmayoccurinsidearowifthereisapossiblebreakpoint inallslotsinthatrow. Trytobemoreprecise? Ifpagebreakbeforeorpagebreakafterisright,leftoralwaysonan elementinsideaslotinanelementbasedtemplate,thevalueistreatedasauto instead. Thepagepropertydoesnotapplytoelementsinsideaslotofanelementbased template. Anyotherforcedpagebreak(seesection5.5ofPagedMedia[CSS3PAGE]) causesanewpagetobecreatedandallcontentinthedocumentafterthispage breakwillbeputinslotsonthenewpageoronlaterpages:slotsonanyprevious pageswillnotbefurtherfilled.
E ampleXVI

Aslidepresentationcanbemadewithatemplateforeachpage(i.e.,slide)and forcedpagebreakbetweentheslides:
@ae {dslyae pg ipa:""/5m @ ""/* buo} ""/at h 1 {pgraeoelas aebekbfr:awy psto:a} oiin pnt{psto:b} .oe oiin

Withadocumentsimilartothis:(fragment)

<1Sie1tte/1 h>ldil<h> <l > l>oin <iTpcoe < l / > <1Sie2tte/1 h>ldil<h> <l > l>oetpc <iMrois < l / > <l =oeNthoe pca n >oetent

E ampleXVII

Thedocumentintheexampleabovedoesn'thaveanelementthatcorrespondsto aslideaslidesimplystartsatanH1andendsbeforethenextH1.Butifthereisa DIVaroundeachslide(asisthecaseinmanyslideformatsinpractice),thesame effectcanalsobeachievedwithoutpagebasedtemplates,byusingthevhunit [CSS3VAL]:

dvsie{egt0vdslya/e@b/nrni i.ldhih:10hipa:""5m""""itisc pgraeoelas aebekbfr:awy} hpsto:a 1{oiin} pntpsto:b .oe{oiin}

Withadocumentsimilartothis:(fragment)
<il =ld> d ca ie h>ldil<h> <1Sie1tte/1 l < > <iTpcoe l>oin /l < > <d > /i <il =ld> d ca ie h>ldil<h> <1Sie2tte/1 l < > <iMrois l>oetpc /l < > pca =oeNthoe <l n >oetent <d > /i

E ampleXVIII

Bothpagebasedandelementbasedtemplatescanbeusedinthesame document.
@ae{dslya"} pgipa:"@ :agf}{oiin} ln(rpsto:a dvseil{ipa:"b""b" i.pcadslyacad}

E ampleXIX

Hereisapageasonemightfindinanewspaper.Itcombinesalayouttemplate withmulticolumnlayout.

Figure12.Thefrontpageofanewspaper,withthefirstpartsofseveralstories thatarecontinuedonotherpagesandheadingsandimagesthatspanseveral columns.

@ae:is pgfrt{ dslyAAAAAc ipa:"AAAA"/5m ......5m "...."/02c

BCCCC ".CCC"/* BCCCC ".CCC"/* BCCCC ".CCC"/* BCCCC ".CCC"/* BCCCC ".CCC"/* BDDDD ".DDD"/* BDDDD ".DDD"/* BEEFF ".E.F"/* BEEFF ".E.F"/* BEEFF ".E.F"/* *3m*3m*3m*3m* eeee } hpsto:aodrbto:tikagnbto:15m 1{oiinbreotmhcmriotm.e} #opsto:bagnrgt15modrrgthn tc{oiinmriih:.ebreih:ti pdigrgt.e} adnih:15m #edr{oiinclmsclma:3m laepsto:coun:4oungpe} #r1{oiinclmsclma:3modrtphn atpsto:doun:4oungpebreo:ti} #r2{oiinclmsclma:3m atpsto:eoun:2oungpe} #r3{oiinclmsclma:3m atpsto:foun:2oungpe}

Ifaslotonapageisfullandthecontentcontinuesonthenextpage,itmaybeuseful toinsertsomethinglikecontinuedonpageX.Thisisusefulatanypagebreak,but moreimportantiftherearemultipleflowsofcontentoneachpage.Maybeapage breakcontentproperty?pagebreakcontent:" continuedonp."targetcounter(???, page)orextendtextoverflowfrom[CSS3TEXT]? Howdoyousettheverticalalignpropertyofaslotinapage?Doesthe::slot() pseudoelementapply?@page:first:slot(A){verticalalign:bottom}

10Stackingorder
Anelementwithacomputedvalueofaletterforitspositionisapositionedelement (see[CSS3POS])andthusthezindexpropertyappliestoit.Thegeneralrulesfor stackingcontexts[refinCSS3?]apply. Notethatanelementcanonlyhavesuchacomputedvalueifithasan ancestorthatisatemplateelement.
E ampleXX

Thisexampleuseszindexandnegativemarginstomaketheelementinthe middleslotpartlyoverlaptheelementsintheotherslots:
bdipa:"." oy{dslyab "c" .. "." de egt4p hih:20x it:20x} wdh4p #akrud00oiin a{bcgon:#Cpsto:a} #akrudC0oiin b{bcgon:#0psto:b} #akrudF0oiinmri:0xne:1} c{bcgon:#Dpsto:cagn2pzidx #akrud0Coiin d{bcgon:#0psto:d}

#akrudAAoiin e{bcgon:#0psto:e}

Figure13.Renderingoftheaboveexample.

11Floatingelementsinsidetemplates
Anelementmaybepositionedinsideatemplate(computedvalueof<letter>forits positionproperty)andbeafloatingelementatthesametime(computedvalueofits floatpropertyisotherthannone).Thefollowingcasesmustbedistinguished: PagebasedfloatsInpagedmedia(see[CSS3PAGE]),ifthevalueoffloat specifiesthattheelementfloatstothetoporbottomofthepage(inahorizontal writingmode)ortheleftorrightofthepage(inaverticalwritingmode),the positionpropertydoesn'tapply. NormalfloatsInothercases,theelementfloatsnormallywithinitscontaining block,whichinthiscaseisitsslotinthetemplate(asdefinedabove).

12Definitionofthegrunitinatemplateelement
TheGridPositioningModule[CSS3GRID]definesagrunitthatisusablewith certainpropertiesthatpositionorsizeboxes.Atemplateelementdefinesanimplicit grid(intheterminologyofthatmodule)forusewiththegrunit.Theverticalgridlines areformedbytheleftandrightcontentedgesofthetemplateelementandbythe edgesbetweenthecolumnsofthetemplate.Thehorizontalgridlinesareformedby thetopandbottomcontentedgesofthetemplateelementandbytheedgesbetween

therowsofthetemplate.Thetopcontentedgeandtheleftcontentedgehavethe number0. Inotherwords,atemplatewithncolumnsandmrowsdefinesn+1vertical gridlinesnumbered0tonandm+1horizontalgridlinesnumbered0tom.

E ampleXXI

Forexample,withthefollowingstylesheet
dv{ i dslyac ipa:"b" df "e" psto:rltv} oiineaie p{ psto:f oiin} #1{ p psto:aslt oiinboue tpg o:1r lf:2r etg}

andthisdocumentfragment
<i> dv pLrmismdlrstae,cnettudpscnlte <>oepuooimtoscearaiiiigei,sd oeumdtmoniiutuaoeeooemgaaiu. disoepricddntlbrtdlranlqa pi=1Pstoe <dp>oiinm. <dv /i>

thep1elementwillbepositionedwithitstopleftcorneragainstthetopleftcorner ofslotf.Butnotethatitisnotpartofthecontentofslotf,itoverlapswithit.

13CRexitcriteria
ForthisspecificationtobeadvancedtoProposedRecommendation,theremustbeat leasttwoindependent,interoperableimplementationsofeachfeature.Eachfeature maybeimplementedbyadifferentsetofproducts,thereisnorequirementthatall featuresbeimplementedbyasingleproduct.Forthepurposesofthiscriterion,we definethefollowingterms: independent eachimplementationmustbedevelopedbyadifferentpartyandcannotshare, reuse,orderivefromcodeusedbyanotherqualifyingimplementation.Sections ofcodethathavenobearingontheimplementationofthisspecificationare exemptfromthisrequirement. interoperable passingtherespectivetestcase(s)intheofficialCSStestsuite,or,ifthe implementationisnotaWebbrowser,anequivalenttest.Everyrelevanttestin thetestsuiteshouldhaveanequivalenttestcreatedifsuchauseragent(UA)is tobeusedtoclaiminteroperability.InadditionifsuchaUAistobeusedtoclaim

interoperability,thentheremustoneormoreadditionalUAswhichcanalsopass thoseequivalenttestsinthesamewayforthepurposeofinteroperability.The equivalenttestsmustbemadepubliclyavailableforthepurposesofpeerreview. implementation auseragentwhich:(1)implementsthespecification.(2)isavailabletothe generalpublic.Theimplementationmaybeashippingproductorotherpublicly availableversion(i.e.,betaversion,previewrelease,ornightlybuild).Non shippingproductreleasesmusthaveimplementedthefeature(s)foraperiodof atleastonemonthinordertodemonstratestability.(3)isnotexperimental(i.e.,a versionspecificallydesignedtopassthetestsuiteandisnotintendedfornormal usagegoingforward). ThespecificationwillremainCandidateRecommendationforatleastsixmonths. AtestsuitewillbedevelopedduringtheCandidateRecommendationphaseof thisspecification.

14History
(Thissectionisnotnormative.) Thefollowingtypesofusecaseswereconsideredfortemplatebasedlayout. 1. StandardWebpages. 2. Gridsandothertablelikelayouts.Thisincludesgridlayouts,framelayoutsand tablelikesubdivisionofarectangulararea. 3. Alayoutstructurewithflexinginformation.Theflexingisrepresentedby constraintsthatspecifyhowthecellsaretorelatetooneanother:whichcellsare tobeallowedtogroworshrinkandhowmuch.Theremayalsobeapriority ordering,whichdetermines,basedonthesizeofthealloweddisplaywindow, whichcellsshrink,whichgrowandunderwhichconditions. 4. Layoutstructureswithabsolutelypositioned(fixedsize)elementsforexamplea blockoftextintowhichseveralillustrationsintrudeatfixedpositionswithinthe block.Thisislikeafloatwithrespecttotightlywrappingthetextaroundthe intrusion,butthepositionoftheintrusionisdeterminedbythelayoutstructure, notthecontentflowedintothatstructure. Anexampleofthisisamulticolumnlayoutwithoneormoreabsolutely positionedfloatsthatintrudeonthecolumns(seefigure).

Figure14.Animage(orapullquote)isplacedcenteredonthepageand intrudesontwoareas.

5. Multiple,disconnected,fixedsizeareasonapagethatarechainedtogether, eachonereceivingthecontentthatdoesn'tfitinthepreviousslot.Incombination withpagebreaks,thismaygivealayoutasoftenseeninnewspapers:thefirst fewlinesofeachstoryonthefirstpage,therestofthestoryinotherareason subsequentpages.(Itwillprobablyneedawaytoconditionallyinsertcontinued onpage7orsimilartext.) Forcomparingproposalsfortemplatebasedlayouts,theworkinggroupidentified fourimportantaspectsofeachproposal: 1. thephysicallayoutstructuresthewayofstructuringthecells(slots)intowhich contentisflowed.Thisincludesawaytoidentifythevariouslayoutcontainers. 2. thebindingmechanismthewaytospecifythatagivenelement(andits descendants)aretobeplacedinagivenlayoutcell. 3. thepropertydistributionmechanismthewaytoputpropertiesontothelayout structureandthecellswithinit. 4. theflexingmechanismthewaytodescribehowthelayoutstructureshould adaptitselftothehigherlevelcontainer(window)inwhichitisplaced.This includesstatementsaboutwhichcellsshouldgrowandwhentheyshouldgrow. Inthisspecification,theseaspectsareasfollows: 1. Acharactermatrixisusedtoshowthelayoutstructureandthecellsarenamed bythecharacterusedtoshowwheretheyarepositioned. 2. Thebindingofcontenttocellsishandledbythepositionpropertywhich identifiesacelltowhichthecontentisbound. 3. Theshape,sizeandflexibilityofthelayoutarespecifiedwiththecharacter martrix.Someproperties(background,borderandverticalalignment)are attachedtoindividualslots. 4. Thereislimitedflexinginformation.Thechoiceisbetweenfixedsize,afraction oftheavailablesizeorthecontent'sintrinsicsize.(Thelatterisfurthersubjectto

min/maxsizesspecifiedonthatcontent.)Itisnotpossibletosay,e.g.,thatsome columncanonlybecomewiderifallothercolumnsareattheirmaximumsize.

Acknowledgments
ThefirstideasfordescribingatemplateinCSSdatefrom1996andaredescribedin FramebasedlayoutviaStyleSheetsbyBertBos,DaveRaggettandHkonWium Lie.Theideawasrevivedin2005ontherequestofW3C'sDeviceIndependence WorkingGroupandbenefitedespeciallyfromdiscussionswithRhysLewisand RotanHanrahanfromthatgroup. ThisspecificationwasfurtherinfluencedbyideasaboutformlayoutbyDave Raggett[memberonlylink]andanearlywriteupofthefeaturesofXULbyIan Hickson[memberonlylink]. AndyClarke,JinaBoltonandKevinLawverprovidedusecases,examplesand requirements.TheanalysisintheHistorysectionisaslightlyshortenedversionof workbySteveZilles. CsarAcebalbuiltthefirstprototype.AndrewFedonioukbuiltthesecond.

References
Normativereferences: [CSS3BG] ElikaJ.EtemadBertBos.CSSBackgroundsandBordersModuleLevel3.10 September2008.W3CWorkingDraft.(Workinprogress.)URL: http://www.w3.org/TR/2008/WDcss3background20080910 [CSS3BOX] BertBos.CSSbasicboxmodel.9August2007.W3CWorkingDraft.(Workin progress.)URL:http://www.w3.org/TR/2007/WDcss3box20070809 [CSS3PAGE] MelindaGrantHkonWiumLie.CSS3Module:PagedMedia.10October2006. W3CWorkingDraft.(Workinprogress.)URL:http://www.w3.org/TR/2006/WD css3page20061010 [CSS3POS] BertBos.CSS3PositioningModule.(forthcoming).W3CWorkingDraft.(Workin progress.) [CSS3SYN] L.DavidBaron.CSS3module:Syntax.13August2003.W3CWorkingDraft. (Workinprogress.)URL:http://www.w3.org/TR/2003/WDcss3syntax20030813 [CSS3TBL] BertBosDavidHyatt.CSS3TablesModule.(forthcoming).W3CWorkingDraft.

(Workinprogress.) [CSS3TEXT] PaulNelsonElikaJ.Etemad.CSSTextLevel3.6March2007.W3CWorking Draft.(Workinprogress.)URL:http://www.w3.org/TR/2007/WDcss3text 20070306 [CSS3VAL] ChrisLilleyHkonWiumLie.CSS3ValuesandUnits.19September2006. W3CWorkingDraft.(Workinprogress.)URL:http://www.w3.org/TR/2006/WD css3values20060919 [UNICODE] TheUnicodeConsortium.TheUnicodeStandard.2003.Definedby:The UnicodeStandard,Version4.0(Boston,MA,AddisonWesley,ISBN0321 185781),asupdatedfromtimetotimebythepublicationofnewversionsURL: http://www.unicode.org/unicode/standard/versions/enumeratedversions.html Otherreferences: [CSS21] BertBosetal.CascadingStyleSheetsLevel2Revision1(CSS2.1) Specification.19July2007.W3CCandidateRecommendation.(Workin progress.)URL:http://www.w3.org/TR/2007/CRCSS2120070719 [CSS3GCPM] HkonWiumLie.CSS3module:GeneratedContentforPagedMedia.4May 2007.W3CWorkingDraft.(Workinprogress.)URL: http://www.w3.org/TR/2007/WDcss3gcpm20070504 [CSS3GRID] MarkusMielkeAlexMogilevsky.CSSGridPositioningModuleLevel3.5 September2007.W3CWorkingDraft.(Workinprogress.)URL: http://www.w3.org/TR/2007/WDcss3grid20070905 [MEDIAQ] DanielGlazmanetal.MediaQueries.15October2008.W3CWorkingDraft. (Workinprogress.)URL:http://www.w3.org/TR/2008/WDcss3mediaqueries 20081015 [SELECT] DanielGlazmanetal.SelectorsLevel3.10March2009.W3CWorkingDraft. (Workinprogress.)URL:http://www.w3.org/TR/2009/WDcss3selectors 20090310

Index
anonymousblockofaslot,5 background,1 blockprogressiondirection,1

<colwidth>,3 direction,1 display,1,3 float,1 height,1 interactive,1 intrinsicminimumwidth,4 intrinsicpreferredwidth,4 layoutalgorithm,4 <length>,1 <letter>,6 noninteractive,1 overflow,1 page,1 pagearea,1 pagebasedtemplate.,9 pagebreakafter,1 pagebreakbefore,1 position,6 <rowheight>,3 slot,3 slot()pseudoelement.,7 <string>,1 templateancestor,3 templateelement.,3 verticalalign,1 width,1 zindex,1