NLB Stilark

Det er utviklet et standarisert og normalisert stilark, som følger brukervennlighet og tilgjengelighetskrav satt av synshemmede (Statped) og dyslektikere (Dysleksi Norge).

Stilarkene er utviklet av NLB, med hjelp fra Seeds på design. Kildekoden er lisensiert med MIT lisens, som gir deg som utvikler full frihet hvis du ønsker å bygge videre på koden vi har utviklet. Det eneste vi ber om er at du nevner oss i deres dokumentasjon.

Denne siden er en demo på stilarket for lydbøker med tekst.

Stilarkene er basert på Bootstrap 4 https://getbootstrap.com/

Trykk for Dagmodus eller Nattmodus

NLB, 2024

Installasjon

• NCC:
  • Filen ncc.min.css må omdøpes til default.css og kopieres inn i rotmappen.
  • I ncc.html må det lenkes til default.css i hodet på filen <link rel="stylesheet" type="text/css" href="default.css"/>
• Lydbok med tekst:
  • Filen html.min.css må omdøpes til default.css og kopieres inn i rotmappen.
  • I hovedfilen må det lenkes til default.css i hodet på filen <link rel="stylesheet" type="text/css" href="default.css"/>
• E-bok:
  • Filen ebok.min.css kopieres inn i rotmappen.
  • I hovedfilen må det lenkes til ebok.min.css i hodet på filen <link rel="stylesheet" type="text/css" href="ebok.min.css"/>
• Nettleserbok:
  • Filene js_style.css og rb_smil_emulator.js slettes fra boken.
  • I hodet på _nettleserbok.html slettes referansene til CSS, og det må legges inn <link rel="stylesheet" type="text/css" href="nettleserbok.min.css"/>.
  • Filen nettleserbok.min.css og rb_smil_emulator.js må kopieres inn i rotmappen.

Krav til HTML

• Filen må ikke inneholde noe inline CSS, dvs. <element style="color:#000;"> siden dette vil overstyre vår CSS.

Nedlasting

Siste versjon finnes på: GitHub

Endringslogg

• v1.0.0: Init
• v1.0.1: Endringer på tabeller, kantlinjefarge, størrelse.
• v1.0.2: La til hidden-headline klasse for å skjule overskrifter.
• v1.1.0: Feilrettinger i lister, overskrifter, skriftstørrelser, o.l.
• v1.1.1: Retting av skriftstørrelse på mobil
• v1.2.0: La til CSS for PIP (Braille)
• v1.2.1: Flyttet hidden-headline klassen for bruk utenfor #content
• v1.2.2: Endret på bakgrunnsfarge til papirhvit/off-white for forbedret lesekvalitet

Dokumentasjon

Body

Bakgrunnsfarge

Overskrifter

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Farge

Brødtekst

<p>

Farge

Ramme

Alle rammer må ha ramme-klassen (bortsett fra generisk-ramme), tilleggsklasser angir bakgrunnsfarge og tekstfarge.

<div class="generisk-ramme">Eksempel</div>

<div class="ramme bg-red">Eksempel</div>

<div class="ramme bg-blue">Eksempel</div>

<div class="ramme bg-yellow">Eksempel</div>

<div class="ramme bg-green">Eksempel</div>

<div class="text-dark">Eksempel</div>

<div class="text-light">Eksempel</div>

Bilder

For bilder bruker du følgende kode:

<img src="..." alt="..." title="..." />

Tabell

<table>
    <thead>
        <tr>
            <th>Fornavn</th>
            <th>Etternavn</th>
            <th>Alder</th>
            <th>Poststed</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ola</td>
            <td>Normann</td>
            <td>43</td>
            <td>Oslo</td>
        </tr>
        <tr>
            <td>Kari</td>
            <td>Normann</td>
            <td>53</td>
            <td>Oslo</td>
        </tr>
        <tr>
            <td>Per</td>
            <td>Normann</td>
            <td>24</td>
            <td>Oslo</td>
        </tr>
        <tr>
            <td>Pål</td>
            <td>Normann</td>
            <td>25</td>
            <td>Oslo</td>
        </tr>
        <tr>
            <td>Espen</td>
            <td>Normann</td>
            <td>17</td>
            <td>Oslo</td>
        </tr>
    </tbody>
</table>

Sortert liste

<ol>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li class="nested-list">
        <ol>
            <li>Sub-element</li>
            <li>Sub-element</li>
        </ol>
    </li>
</ol>

1. Element
2. Element
3. Element
4. 1. Sub-element
   2. Sub-element

Usortert liste

<ul>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li class="nested-list">
        <ul>
            <li>Sub-element</li>
            <li>Sub-element</li>
        </ul>
    </li>
</ul>

• Element
• Element
• Element
• • Sub-element
  • Sub-element

Fotnoter

Fotnoter merkes av med klassen noteref refererer til id for dertilhørende fotnote, se eksempel under.

<p>
    Lorem<a href="#ref1" epub:type="noteref" class="noteref">1</a> ipsum<a href="#ref2" epub:type="noteref" class="noteref">2</a>
</p>
<ol>
  <li epub:type="footnote" class="notebody" id="ref1">...</li>
  <li epub:type="footnote" class="notebody" id="ref2">...</li>
</ol>

Lorem1 ipsum2

1. ...
2. ...

Sidetall

Sidetall merkes av med klassene page-front, page-normal og page-special.

Block-kontekst:

<div id="…" epub:type="pagebreak" class="page-front" title="1">1</div>
<div id="…" epub:type="pagebreak" class="page-normal" title="1">1</div>
<div id="…" epub:type="pagebreak" class="page-special" title="1">1</div>

Inline-kontekst:

<span id="…" epub:type="pagebreak" class="page-front" title="1">1</span>
<span id="…" epub:type="pagebreak" class="page-normal" title="1">1</span>
<span id="…" epub:type="pagebreak" class="page-special" title="1">1</span>

1

Prodnoter

<aside class="prodnote" epub:type="z3998:production">
    <span>Produksjonstekst</span>
</aside>