Vi starter, hvor vi slap i Tutorial 2. Inden vi fortsætter med if-statements, vil jeg dog bruge denne tutorial til at vise, hvordan man kan ændre layoutet på sin tekst.
Vi lægger ud med at åbne vores projekt fra sidste gang. Du kan bruge din egen version eller hente min her.
Når projektet er åbent, klikker vi på projektnavnet nederst i venstre hjørne og derefter på ”Redigér historiens Stylesheet”, som vist nedenfor:
Herefter indsætter vi følgende tekst:
tw-passage {
color:#E6E6E6;
background-color: #2E2E2E;
font-family: calibri light;
text-align: left;
font-size: 3vh;
font-size: 3vw;
font-size: 3vmin;
line-height: normal;
}
Som set her:
Lad os se nærmere på, hvad denne kode gør. ’tw-passage’ er ændringer, der omfatter selve teksten i passagerne, men ikke linkene, når man eksempelvis tager et valg eller skifter side.
color:#E6E6E6;
Color er selve farven. Her kan du sætte en hvilken som helst html-farvekode ind. Koderne kan du finde på hjemmesider som denne.
background-color: #2E2E2E;
Background-color er kun baggrundsfarven omkring selve passagens tekst. Også den farve vælges ud fra en html-farvekode.
font-family: calibri light;
Font-family er selve skrifttypen, der bruges i din interaktive historie. Her er det vigtigt at bemærke, at du skal bruge standartskrifttyper, eksempelvis dem som word har adgang til. Vil du bruge din egen skrifttype, kræver det mere kodning, og det gennemgår jeg ikke i denne tutorial.
For at skifte skrifttype skriver du bare skrifttypens navn i stedet for ”calibri light”.
text-align: left;
Text-align placerer teksten eksempelvis mod venstre (left), i midten (center) eller mod højre (right).
font-size: 3vh;
font-size: 3vw;
font-size: 3vmin;
Font-size er bogstavernes størrelse og forhold til hinanden. Du kan prøve at skrive nogle forskellige tal og trykke på play-knappen for at se, hvordan teksten ændrer sig. Jeg kan vise et eksempel herunder. Med den tekst-opsætning, jeg har givet, ser teksten sådan ud:
Hvis vi nu ændrer på font-size: 3vmin til 10vmin, som er selve tekstens størrelse, ændrer teksten sig således:
Jeg retter tilbage til 3vmin 😊
line-height er afstanden mellem linjerne og sørger for, at afstanden forbliver den samme, lige meget hvilken størrelse browser-vinduet er.
Lad os tilføje noget mere layout formatering.
Gå tilbage ind i ”Redigér historiens Storysheet” og tilføj følgende tekst:
tw-story {
background-color: #2E2E2E;
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
Det vil nu se sådan ud:
Og selve teksten i browseren ser sådan ud:
’tw-story’ er formateringen uden om passagens tekst.
Background-color ændrer denne gang baggrundsfarven uden om passagens tekst.
I mit tilfælde har jeg valgt at give teksten en max width og en margin, så linjerne ikke bliver så lange. Længden af linjerne kan nemlig gøre teksten mere hård at læse for øjnene. Dette er selvfølgelig fuldstændig valgfrit.
Fjerne man width og margin-left, margin-right, ser teksten sådan ud:
Du kan gøre lige det, du har lyst til 😊
Vi åbner igen ”Redigér historiens Storysheet”. For at formatere linkene tilføjer jeg teksten:
tw-link {
color:#424242;
}
.enchantment-link:hover, tw-link:hover {
color:#FF8000;
}
.visited {
color:#424242;;
}
.visited:hover {
color:#FF8000;
}
Som set her:
For læseren ser teksten nu sådan ud:
Når musen føres over ’Side 2’ eller andre link, skifter den fra grå til orange. Det er html-farvekoderne jeg har valgt. Lad mig gennemgå koden, vi lige har indsat, så du ved, hvad du skal ændre for at formatere teksten, som du gerne vil have den.
Tw-link er selve link-tekstens formatering.
color:#424242;
Color er den farve, linkteksten er, når musen ikke er ført over den. I dette tilfælde grå.
.enchantment-link:hover, tw-link:hover {
color:#FF8000;
Tw-link:hover er farven, som teksten får, når man fører musen over den. I dette tilfælde orange.
.visited {
color:#424242;
Visited er links, som læseren tidligere har trykket på. Hvis du læser kapitel 1 to gange, vil linksene skifte farve, og det er jeg ikke interesseret i. Derfor sætter jeg farvekoden til at være det samme som med de normale links.
.visited:hover {
color:#FF8000;
Visited:hover er links, som man allerede tidligere har klikket på, og som man fører musen over. Jeg sætter farven til at være den samme som de øvrige link-farver.
Husk at gemme dit projekt, når du er færdig med at formatere 🙂 Du gemmer ved at klikke på projektets navn nederst i venstre hjørne og vælge “Udgiv som fil”. Husk at tilføje “.html” efter filnavnet.
Hvis du vil hente min projektfil, kan du gøre det her.
– Pernille
Mestenes-Serien 