Kirjoitin nyt alkuvuodesta muuan uudelle asiakkaalle tyylitiedoston. Koska olen nyt reilun vuoden ajan opetellut erilaisia CSS:n käytön kikkoja, pääsin lisäämään kyseiseen tiedostoon pieniä yksityiskohtia, joita kaikilla vanhoilla asiakkailla ei ole välttämättä omissaan.
Tästä syystä ajattelin olevan hyvä jakaa niitä myös muiden tietoisuuteen artikkelin muodossa.
Tyhjien Otsikoiden Sivunvaihdot
Lähes kaikissa DoX CMS:n kanssa käytetyissä tyylitiedostoissa on sääntöjä, jotka estävät sivunvaihdot otsikoiden ja niiden alisen sisällön välillä. Nämä säännöt eivät kuitenkaan sellaisinaan ulotu otsikkosisältöihin, joiden ainoa sisältö on niiden otsikko ja jotka toimivat yläotsikoina varsinaisille sisältömoduuleille. Pyrin itse välttämään tyhjien otsikkosisältöjen käyttämistä, mutta muutoin kyseessä on kohtuullisen yleinen käytänne.
Löytämäni paras tapa estää sivunvaihdot näiden yläotsikoiden ja niiden alaotsikoiden välillä on seuraavanlainen:
.topicBodyWrapper:empty {
page-break-after: avoid
}Yksinkertaista. Kyseinen sääntö sanoo, että otsikkosisällön sisältöosion ollessa tyhjä tulee välittömästi sen jälkeen välttää sivunvaihtoja. Kyseinen tyhjä sisältöosio on edelleen osa PDF:n kasaamisen käytettyä dokumenttipohjaa, mistä syystä esimerkiksi säännöt koskien kahta välittömästi peräkkäistä sisällön otsikkoa eivät auta tältä osin.
Tämän säännön voi lisätä sellaisenaan mihin tahansa DoX CMS -instanssiin, jos kyseisenlaisissa tilanteissa halutaan välttää yläotsikon jääminen edellisen sivun loppuun.
Usein on syytä tarkistaa myös muut sivunvaihtoja koskevat säännöt ja että riittävän moni tilanne on jo huomioitu. Aiheesta löytyy hieman lisää esimerkiksi täältä.
Tavutussäännöt
Yksi todella yleisistä syistä yhteydenottoihin ovat rikkinäiset taulukot. Lähes poikkeuksetta syynä niille on yhdistelmä sarakkeiden leveyden automatisoitua laskemista sekä liian leveitä sisältöjä. Alla kommentoidaan tapoja vastata molempiin, vaikka itse ohje koskee jälkimmäistä aihetta.
Henkilökohtaisesti olen sitä mieltä, että automatisoidusti lasketut sarakeleveydet eivät kuulu käyttöoppaisiin. Kyseessä on tosin esteettinen mieltymys: koska sarakeleveydet vaihtelevat tällöin sisällön mukaisesti, muutoin vastaavat peräkkäiset taulukot tai samat taulukot eri kielillä voivat käyttää eroavia sarakeleveyksiä.
Toinen syy vaihtaa tasattuihin taulukoihin on, kuinka automatisoidusti lasketut sarakeleveydet reagoivat tilanteissa, missä saatavilla oleva kokonaisleveys ei riitä kaikelle sisällölle. Kun näin käy, automatisoidusti lasketut sarakkeet leviävät yli sivumarginaaleista. Käytännössä tämä rikkoo koko taulukon asettelun, eikä syyllisiä ole helppoa löytää syntyvän sotkun joukosta. Vaikka taulukko näyttäisi asialliselta alkuperäiskielellä, voi kyseinen ongelma syntyä käännösversioissa. Taulukot ovat yksi syistä, miksi käännöksien katselmointi on tärkeää, vaikka itse käännöksen soveltuvuutta ei itse kykenisikään arvioimaan.
Tasattujen taulukoiden tapauksessa ylileveä sisältö puolestaan venyy yli määritetyn sarakeleveyden. Tällöin sen jäljittäminen on helppoa: sinun tarvitsee vain etsiä kyseiset kohdat ja korjata ne. Toki myös tämä vaatii katselmointia, mutta se on tehtävissä selaamalla dokumenttia itseään.
Löytyy kuitenkin myös keinoja, joilla voidaan välttää ainakin osa käsin tehdyistä korjauksista.
CSS tukee myös kielikohtaista automatisoitua sanojen tavutusta rivinvaihtojen lisäämiseksi. Kaikkia kieliä ei tueta ilman erikseen määritettyjä resursseja. Esimerkiksi suomi ei ole yleisesti tuettu kieli tältä osin. Tällöin rivinvaihdoista tulee huolehtia lisäämällä tavutusviivat käsin. Ohjeet automatisoidun tavutuksen lisäämiseen löytyvät alta.
body {
hyphens: manual;
}
[lang="En"] * {
hyphens: auto;
}
*[doxelementclass="NoHyphens"], [doxelementclass="NoHyphens"] * {
hyphens: none !important;
}Ensimmäinen kohta on oletussääntö, jota käytetään kielikohtaisten asetusten puuttuessa. Se varmistaa, että itse lisätyt tavutusviivat sallivat rivinvaihdon kyseisissä kohdissa, jos sisältö muutoin venyisi yli käytettävissä olevan leveyssuuntaisen tilan.
Toinen kohta on esimerkki kielikohtaisesta määritteestä, kun kyseiselle kielelle on olemassa oletusarvoinen määrite. Englanti on esimerkki tällaisesta kielestä. Itse määritetyt tavutusresurssit vaatisivat lisämääreitä, joita ei käsitellä tässä yhteydessä. Jos kyseisiä resursseja ei ole määritetty oletusarvoisesti, on epäluultavaa, että ne ovat ylipäätään saatavilla. Tässä yhteydessä kielitunniste kertoo, että kyseisen kielen sisältöjen osalta tavutus rivinvaihtoja varten tulee kasaamisen yhteydessä kyseisen kielen tavutuksen mukaisesti. Jos tosin yksitavuisille sanoille ei ole riittävästi tilaa, ei niihin tällöin lisätä tavutusta. Ne täytyy edelleen huomioida itse.
Kolmas kohta on elementtiluokka, jolla merkityt elementit voidaan pakottaa olemaan tavuttumatta. Voit esimerkiksi tarvita fraasielementtiä (ph) tällä elementtiluokalla tuotekoodeille, jotka sisältävät tavuviivoja, mutta joiden sisään ei saa syntyä rivinvaihtoa. Koska kyse on elementtiluokasta, voi sen nimen tietenkin määrittää itse.
Elementtiluokkaliimaa
Useimmiten emme suosittele sivunvaihtojen tilannekohtaista säätämistä. Varsinkin käsin lisätyt sivunvaihdot muualla kuin moduulien alussa heikentävät sisällön uudelleenkäytettävyyttä ja voivat johtaa ongelmiin ne perivien käännössisältöjen osalta. Vaikkapa sivunvaihtojen estämiselle voi tosin olla ajoittain hyviä syitä.
Esimerkiksi kyseisen asiakkaan tapauksessa heillä on käytössä paljon listoja, joita ennen ja joiden jälkeen mukana on lyhyitä, usein alle yhden rivin mittaisia tekstikappaleita. Kyseisten kappaleiden erottaminen eri sivuille kuin itse listat ei olisi näyttänyt asialliselta. Koska kyseessä ei kuitenkaan ole yleinen sääntö koskien kaikkia listoja, ei sitä ole mielekästä huomioida sellaisenaan. Tästä syystä näihin tilanteisiin tarvitaan elementtiluokkaan perustuva ratkaisu:
*[doxelementclass="NoPageBreaksBelow"] {
page-break-after: avoid !important;
}Kyseinen elementtiluokka estää sivunvaihdot sillä merkittyjen elementtien jälkeen. Jos sitä siis käytetään yllä kuvatun kaltaisissa tilanteissa sekä listaa alustavaan kappaleeseen että tarvittaessa itse listaan, saadaan estettyä sivunvaihdot merkittyjen elementtien välissä.
Toinen vaihtoehto olisi tietenkin osioelementtien (section) käyttäminen ja niiden merkitseminen elementtiluokalla, joka estää niiden alaelementtien väliset sivunvaihdot. Täten saataisiin kasattua helpommin kokonaisuuksia, joissa sivunvaihdot eivät erota elementtejä toisistaan. Se kuitenkin vaatisi ainakin kyseisten otsikkosisältöjen kirjoittamista kokonaan osioelementtejä käyttäen. Kyseinen käytänteen jälkikäteen omaksuminen voi olla turhan työlästä.
Sivuttaissivuja
Kyseisen asiakkaan oppaat on tarkoitettu sähköisesti käytettäviksi. Tästä syystä tulostettavuus ei ole tärkeää. Osa sivuista voi siis olla pituussuhteiltaan poikkeavia. Yksi heidän pyynnöistään oli mahdollisuus lisätä dokumenttien väliin vaakasuuntaisia sivuja. Alla on käyttämäni ratkaisu. Tämä vaihtoehto kuitenkin toimii DoX CMS:ssä vain DocRaptorin kanssa.
*[doxelementclass="HorizontalPage"] {
page: landscape;
}
@page landscape {
size: A4 landscape;
margin-left: 20mm;
margin-right: 20mm;
margin-top: 20mm;
margin-bottom: 20mm;
}Kyseiset säännöt käytännössä kertovat, että kyseisen elementtiluokan omaavat elementit muodostavat oman sivuryhmänsä, jonka sivut asetetaan sivuttaissuuntaisesti. Sivumarginaalit saa päättää itse.
Sivuttaissuuntaisten sivujen avulla on mahdollista luoda lisäleveyttä esimerkiksi taulukoille, joissa on useampia tai erityisen leveitä sarakkeita.
Tätä elementtiluokkaa on hyvä käyttää joko kokonaisiin otsikkosisältöihin tai osioelementteihin (section). Muussa tapauksessa ympäröivät elementit kuten otsikot eivät tule samalle sivulle kuin sisältö. Jos vain otsikkosisällön alkuosa halutaan kyseisenlaiselle sivulle, mutta siinä on myös muuta sisältöä, tulee kyseinen elementtiluokka antaa sekä sisällön otsikkoelementille (title) että halutuille muille elementeille. Otsikkoelementtiä ei voi valita suoraan, mistä syystä elementtiluokka on annettava sille lähdekoodin kautta. Tämä tapahtuu kopioimalla elementtiluokan määre toiselta elementiltä ja lisäämällä se title-elementin vastaavaan sijaintiin sen määreeksi.
Viittaukset Muihin Sisältöihin
Koska monille elementeille kuten huomioelementeille (note) ja kappaleille (p) on mahdollista antaa ID-arvot, on niihin mahdollista myös kohdistaa sisäisiä linkkejä. Sisäiset linkit on kuitenkin tarkoitettu ensisijaisesti muiden otsikkosisältöjen, taulukoiden ja kuvakehyksien (fig) kanssa käytettäviksi. Kun niitä käytetään muihin elementteihin, viittaavat järjestelmän lisäämät viitteet geneeriseen ’default-series’-muuttujaan ja kohde-elementeille lisätään vastaavat otsikot. Jälkimmäinen ongelma on kuitenkin helppoa korjata, jos näitä linkkejä haluaa käyttää esimerkiksi aina itse kirjoitettujen viitteiden kanssa.
.anchor-title:not(.dita-table .dita-title *):not(.dita-fig .dita-title *) {
display: none !important;
}Tämä sääntö piilottaa kyseiset lisätyt otsikot. Tämä tekee järjestelmän lisäämistä viitteistä käyttäjän kannalta toimimattomia, koska niissä mainittu viittauskohde ei ole nimetty vastaavalla tavalla. Siksi on tärkeää käyttää tällaisia linkkejä vain itse kirjoitettujen viitteiden kuten ’täältä’ kanssa.