Täiuslik sisukord HTML + CSS-iga

Selle aasta alguses andsin ise välja e-raamatu nimega JavaScripti lubaduste mõistmine (tasuta allalaadimiseks). Kuigi mul polnud kavatsust muuta seda trükitud raamatuks, jõudis piisavalt palju inimesi, kes uurisid trükiversiooni kohta, ja otsustasin ka selle ise välja anda. Arvasin, et HTML-i ja CSS-i kasutamine oleks lihtne. genereerige PDF-fail ja saatke see seejärel printerisse. Mida ma ei mõistnud, oli see, et mul pole vastust trükitud raamatu olulisele osale: sisukorrale.

Sisukorra ülesehitus

Sisukord on oma olemuselt üsna lihtne. Iga rida tähistab osa raamatust või veebilehest ja näitab, kust selle sisu leiate. Tavaliselt koosnevad read kolmest osast:

1. Peatüki või jaotise pealkiri
2. Juhid (st need punktid, kriipsud või jooned), mis visuaalselt ühendavad pealkirja leheküljenumbriga
3. Lehekülje number

Sisukorda on lihtne luua tekstitöötlustööriistades, nagu Microsoft Word või Google Docs, kuid kuna minu sisu oli Markdownis ja seejärel muudeti HTML-iks, ei olnud see minu jaoks hea valik. Tahtsin midagi automatiseeritud, mis töötaks HTML-iga, et luua sisukord printimiseks sobivas vormingus. Samuti soovisin, et iga rida oleks link, et seda saaks kasutada veebilehtedel ja PDF-failides dokumendis navigeerimiseks. Samuti tahtsin pealkirja ja leheküljenumbri vahele täpijuhiseid.

Ja nii ma hakkasin uurima.

Leidsin kaks suurepärast ajaveebi postitust sisukorra loomise kohta HTML-i ja CSS-iga. Esimene oli "Koostage oma HTML-ist sisukord" autor Julie Blanc. Julie töötas edasi PagedJS, veebibrauserites puuduvate leheküljeliste meediumifunktsioonide polütäite, mis vormindab dokumendid printimiseks õigesti. Alustasin Julie näitega, kuid avastasin, et see ei tööta minu jaoks päris hästi. Järgmiseks leidsin Christoph Grabo oma "Reageerivad TOC juhtjooned CSS-iga" postitus, mis tutvustas joondamise hõlbustamiseks CSS-võrgu kasutamise kontseptsiooni (erinevalt Julie ujukipõhisest lähenemisviisist). Taaskord aga ei vastanud tema lähenemine minu eesmärkidele päris õigeks.

Pärast nende kahe postituse lugemist tundsin aga, et saan paigutusprobleemidest piisavalt hästi aru, et iseseisvalt alustada. Kasutasin mõlema ajaveebi postituse tükke ning lisasin lähenemisviisi mõned uued HTML-i ja CSS-i kontseptsioonid, et jõuda tulemuseni, millega olen rahul.

Õige märgistuse valimine

Sisukorra õige märgistuse üle otsustades mõtlesin eelkõige õigele semantikale. Põhimõtteliselt on sisukorras pealkiri (peatükk või alajaotis), mis on seotud leheküljenumbriga peaaegu nagu võtme-väärtuse paar. See viis mind kahe võimaluseni:

• Üks võimalus on kasutada tabelit (<table>) ühe veeruga pealkirja ja ühe veeruga lehe jaoks.
• Siis on sageli kasutamata ja unustatud määratluste loend (<dl>) element. See toimib ka võtmeväärtuste kaardina. Nii et taaskord oleks pealkirja ja leheküljenumbri seos ilmne.

Kumbki neist tundus hea valik, kuni mõistsin, et need töötavad tegelikult ainult ühetasandiliste sisukordade puhul, nimelt ainult siis, kui ma soovin sisukorda ainult peatükkide nimedega. Kui ma aga tahtsin sisukorras alajaotisi näidata, polnud mul häid valikuid. Tabelielemendid pole hierarhiliste andmete jaoks suurepärased, ja kuigi definitsiooniloendeid saab tehniliselt pesastada, ei tundunud semantika õige. Niisiis, ma läksin tagasi joonistuslaua juurde.

Otsustasin tugineda Julie lähenemisviisile ja kasutada nimekirja; siiski valisin tellitud nimekirja (<ol>) järjestamata loendi asemel (<ul>). Ma arvan, et järjestatud nimekiri on antud juhul sobivam. Sisukord kujutab peatükkide ja alamrubriikide loendit nende sisus esinemise järjekorras. Järjekord on oluline ja see ei tohiks märgistuses kaduma minna.

Kahjuks tähendab järjestatud loendi kasutamine pealkirja ja lehenumbri vahelise semantilise seose kaotamist, nii et minu järgmine samm oli selle seose taastamine igas loendiüksuses. Lihtsaim viis selle lahendamiseks on sisestada sõna "leht" lehekülje numbri ette. Nii on arvu suhe teksti suhtes selge, isegi ilma igasuguse visuaalse eristuseta.

Siin on lihtne HTML-skelett, mis oli minu märgistuse aluseks:

<ol class="toc-list"> <li> <a href="#link_to_heading"> <span class="title">Chapter or subsection title</span> <span class="page">Page 1</span> </a> <ol> <!-- subsection items --> </ol> </li>
</ol>

Stiilide rakendamine sisukorrale

Kui olin kehtestanud märgistuse, mida kavatsesin kasutada, oli järgmine samm mõne stiili rakendamine.

Esiteks eemaldasin automaatselt genereeritud numbrid. Soovi korral saate jätta automaatselt genereeritud numbrid oma projektis alles, kuid raamatute puhul on tavaline, et peatükkide loendis sisalduvad nummerdamata ees- ja järelsõnad, mistõttu on automaatselt genereeritud numbrid valed.

Enda eesmärgil täidaksin peatükkide numbrid käsitsi ja kohandaksin seejärel paigutust nii, et tipptasemel loendil poleks polsterdust (seega joondaksin selle lõikudega) ja iga manustatud loendi taane on kaks tühikut. Valisin kasutada a 2ch polsterdusväärtust, sest ma polnud ikka veel päris kindel, millist fonti ma kasutan. The ch pikkusühik võimaldab polsterdust olla suhteline tähemärgi laiusega – olenemata sellest, millist fonti kasutatakse –, mitte absoluutse pikslisuuruse suhtes, mis võib lõppeda ebaühtlasena.

Siin on CSS, millega ma lõpuks sain:

.toc-list, .toc-list ol { list-style-type: none;
} .toc-list { padding: 0;
} .toc-list ol { padding-inline-start: 2ch;
}

Sara Soueidan juhtis mulle tähelepanu sellele, et WebKiti brauserid eemaldavad loendi semantika, kui list-style-type is none, nii et mul oli vaja lisada role="list" selle säilitamiseks HTML-i:

<ol class="toc-list" role="list"> <li> <a href="#link_to_heading"> <span class="title">Chapter or subsection title</span> <span class="page">Page 1</span> </a> <ol role="list"> <!-- subsection items --> </ol> </li>
</ol>

Pealkirja ja lehekülje numbri kujundamine

Kuna loend oli minu maitse järgi kujundatud, oli aeg liikuda üksiku loendiüksuse stiili juurde. Iga sisukorra üksuse pealkiri ja lehekülje number peavad olema samal real, pealkiri vasakul ja lehekülje number paremal.

Võib-olla mõtlete: "Pole probleemi, selleks on flexbox!" Sa ei eksi! Flexbox suudab tõepoolest saavutada tiitellehe õige joonduse. Kuid liidrite lisamisel on mõningaid keerulisi joondusprobleeme, mistõttu otsustasin selle asemel kasutada Christophi lähenemisviisi, kasutades ruudustikku, mis boonusena aitab ka mitmerealiste pealkirjade puhul. Siin on üksiku üksuse CSS:

.toc-list li > a { text-decoration: none; display: grid; grid-template-columns: auto max-content; align-items: end;
} .toc-list li > a > .page { text-align: right;
}

Võrgustikul on kaks veergu, millest esimene on auto-suurusega, et täita konteineri kogu laius, miinus teine ​​veerg, mille suurus on max-content. Lehekülje number on joondatud paremale, nagu sisukorras tavapärane.

Ainus teine ​​muudatus, mille ma sel hetkel tegin, oli lehe teksti peitmine. See on ekraanilugejatele kasulik, kuid visuaalselt ebavajalik, seega kasutasin a traditsiooniline visually-hidden klass selle nägemise eest varjamiseks:

.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(100%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;
}

Ja loomulikult tuleb selle klassi kasutamiseks värskendada HTML-i:

<ol class="toc-list" role="list"> <li> <a href="#link_to_heading"> <span class="title">Chapter or subsection title</span> <span class="page"><span class="visually-hidden">Page</span> 1</span> </a> <ol role="list"> <!-- subsection items --> </ol> </li>
</ol>

Kui see sihtasutus oli paigas, pöördusin pealkirja ja lehe vahel olevate juhtide poole.

Punktjuhtide loomine

Liidrid on trükimeedias nii levinud, et võite küsida, miks CSS seda juba ei toeta? Vastus on: see teeb. Noh, selline.

Tegelikult on olemas a leader() defineeritud funktsioon CSS-i loodud sisu Paged Media spetsifikatsioonide jaoks. Kuid nagu enamiku lehekülgede spetsifikatsioonide puhul, pole seda funktsiooni üheski brauseris rakendatud, mistõttu on see valik välistatud (vähemalt sel ajal, kui ma seda kirjutan). Seda pole isegi loetletud caniuse.com, arvatavasti seetõttu, et keegi pole seda ellu viinud ja pole ka plaane ega signaale, et nad seda teeksid.

Õnneks käsitlesid nii Julie kui ka Christoph seda probleemi juba oma postitustes. Punktijuhtide sisestamiseks kasutasid mõlemad a ::after pseudoelement omaga content atribuut on seatud väga pikale punktide jadale, näiteks järgmiselt:

.toc-list li > a > .title { position: relative; overflow: hidden;
} .toc-list li > a .title::after { position: absolute; padding-left: .25ch; content: " . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . "; text-align: right;
}

. ::after pseudoelement seatakse absoluutsesse asendisse, et viia see lehe voost välja ja vältida mähkimist teistele ridadele. Tekst on joondatud paremale, kuna tahame, et iga rea ​​viimased punktid oleksid rea lõpus oleva numbriga. (Lähemalt selle keerukusest hiljem.) .title elemendil on suhteline asukoht, nii et ::after pseudoelement ei murdu oma karbist välja. Vahepeal, overflow on peidetud, nii et kõik need lisapunktid on nähtamatud. Tulemuseks on ilus sisukord täppidega.

Siiski on veel midagi, mis vajab tähelepanu.

Sara juhtis mulle tähelepanu ka sellele, et kõiki neid punkte loetakse ekraanilugejatele tekstiks. Mida sa siis kuuled? "Sissejuhatus punkt dot dot dot…", kuni kõik punktid on välja kuulutatud. See on ekraanilugeja kasutajatele kohutav kogemus.

Lahenduseks on lisaelemendi sisestamine aria-hidden seatud true ja seejärel kasutage seda elementi punktide sisestamiseks. Nii saab HTML-ist:

<ol class="toc-list" role="list"> <li> <a href="#link_to_heading"> <span class="title">Chapter or subsection title<span class="leaders" aria-hidden="true"></span></span> <span class="page"><span class="visually-hidden">Page</span> 1</span> </a> <ol role="list"> <!-- subsection items --> </ol> </li>
</ol>

Ja CSS-ist saab:

.toc-list li > a > .title { position: relative; overflow: hidden;
} .toc-list li > a .leaders::after { position: absolute; padding-left: .25ch; content: " . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . "; text-align: right;
}

Nüüd ignoreerivad ekraanilugejad punkte ja säästavad kasutajad mitmete väljakuulutatud punktide kuulamisel frustratsioonist.

Viimistlus

Sisukorra komponent näeb praegu päris hea välja, kuid see võib vajada väiksemaid detaile. Alustuseks nihutas enamik raamatuid visuaalselt peatükkide pealkirjad alajaotuste pealkirjadest, nii et muutsin tipptaseme üksused paksuks ja lisasin veerise, et eraldada alajaotised järgnevatest peatükkidest:

.toc-list > li > a { font-weight: bold; margin-block-start: 1em;
}

Järgmiseks tahtsin puhastada leheküljenumbrite joondust. Kui kasutasin fikseeritud laiusega fonti, tundus kõik korras, kuid muutuva laiusega fontide puhul võivad juhtpunktid lehenumbri laiusega kohandudes moodustada siksakmustri. Näiteks mis tahes leheküljenumber, millel on 1, on kitsam kui teised, mille tulemuseks on eesmise punktid, mis on eelmiste või järgmiste ridade punktidega valesti joondatud.

Selle probleemi lahendamiseks seadsin font-variant-numeric et tabular-nums seega käsitletakse kõiki numbreid sama laiusega. Seades ka minimaalse laiuse väärtusele 2ch, tagasin, et kõik ühe- või kahekohalised numbrid oleksid ideaalselt joondatud. (Võib-olla soovite selle seada 3ch kui teie projektil on rohkem kui 100 lehekülge.) Siin on leheküljenumbri lõplik CSS:

.toc-list li > a > .page { min-width: 2ch; font-variant-numeric: tabular-nums; text-align: right;
}

Ja sellega on sisukord valmis!

Järeldus

Sisukorra loomine ainult HTML-i ja CSS-iga oli suurem väljakutse, kui ma ootasin, kuid olen tulemusega väga rahul. See lähenemine pole mitte ainult piisavalt paindlik peatükkide ja alajaotiste mahutamiseks, vaid käsitleb alamjaotisi kenasti ilma CSS-i värskendamata. Üldine lähenemine toimib veebilehtedel, kus soovite linkida erinevatele sisu asukohtadele, samuti PDF-failidele, kus soovite sisukorra linkida erinevatele lehtedele. Ja loomulikult näeb see hea välja ka trükituna, kui kipute seda kunagi brošüüris või raamatus kasutama.

Tahaksin tänada Julie Blanci ja Christoph Grabot nende suurepäraste blogipostituste eest sisukorra loomise kohta, kuna mõlemad olid alustamise ajal hindamatud. Samuti tahaksin tänada Sara Soueidani juurdepääsetavuse tagasiside eest, kui ma selle projekti kallal töötasin.

---

Täiuslik sisukord HTML + CSS-iga algselt avaldatud CSS-nipid. Sa peaksid hankige uudiskiri.

• Münditark. Euroopa parim Bitcoini ja krüptobörs.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. TASUTA PÄÄS.
• CryptoHawk. Altcoini radar. Tasuta prooviversioon.
• Source: https://css-tricks.com/a-perfect-table-of-contents-with-html-css/