Richie Ota yhteyttä
FI

Mukautuva lukutila

Miten lehtijuttu
mahtuu puhelimeen?

Mukautuva lukutila kokoaa painetun lehden jutun yhteen palstaan. Tässä seuraamme, miten teksti, kuvat ja kirjasimet siirtyvät PDF:stä puhelimen näytölle.

Pyydä esittely

Seurataan yhtä juttua
sivulta näytölle.

Tässä on Foreign Policyn kolmen sivun juttu ja siitä muodostettu lukutila. Kokeile vaihtaa tekstikokoa tai lukutilan leveyttä ja seuraa, miten taitto muuttuu.

Painetun lehden sivut 7–9
Painetun lehden sivu 7.
Painetun lehden sivu 8.
Painetun lehden sivu 9.
Foreign Policyn kolmen sivun juttu, jonka kirjaimet ja kuva on poimittu lehden PDF:stä. Selain ja iOS-sovellus käyttävät samaa taitto-ohjelmaa.

Sivusta jutuksi,
jutusta lukutilaksi.

PDF kertoo tarkasti, miltä sivu näyttää. Lukutilaa varten on selvitettävä myös, miten sivulla oleva juttu luetaan.

Palvelimella ennen julkaisua

Lukijan laitteella

  1. 01Poiminta

    PDF:stä saadaan kirjaimet, kuvat ja niiden paikat sivulla.

  2. 02Rakenne

    Jutun tekstit ja kuvat tunnistetaan ja kootaan yhdeksi kokonaisuudeksi.

  3. 03Suunnittelu

    Jutulle laaditaan taitto-ohje yhden palstan lukutilaan.

  4. 04Piirto

    Valmis ohje sovitetaan näytön leveyteen ja tekstikokoon.

Ennen julkaisua ohjelma tarkistaa automaattisten sääntöjen avulla, että jutun sisältö säilyy ja taitto toimii. Jos juttu ei läpäise tarkistusta, se on luettavissa lehden sivuna.

01 · Poiminta

Kaikki alkaa
lehden sivusta.

Lehden ilme on pienissäkin yksityiskohdissa: otsikon kirjasimessa, kuvatekstin koossa ja kappaleen aloittavassa suuressa kirjaimessa. Siksi pelkän tekstin poimiminen ei riitä.

Poimintavaiheessa otamme PDF:stä talteen kirjainten ulkoasun, mitat, värit ja sijainnit sekä kuvat, sivun viivat ja mukana olevat rakennetiedot. Emme vielä päätä, mikä on otsikko tai mihin juttuun kuva kuuluu. Keräämme tiedot, joiden perusteella se voidaan ratkaista seuraavaksi.

Foreign Policyn sivun 7 alaosa: otsikko India’s Political Atmosphere Has Changed, sen alla lyhyt viiva ja kirjoittajan nimi, sivun reunassa pystyssä kuvaajan nimi ja leipätekstin alussa suuri D-anfangi.
  1. OtsikkoTiempos Headline Light, 24 pt
  2. Viiva otsikon alla0,25 pt paksu, 36 pt pitkä
  3. KirjoittajaTiempos Text Regular Italic, 8,5 pt
  4. Kuvaajan nimiSolido Medium, 4,5 pt, pystyssä
  5. Anfangioma kirjasin, 96 pt
  6. LeipätekstiTiempos Text Regular, 8,5/12 pt, tasapalsta
  7. Lehden oma tavutusmyr-iad
Foreign Policyn jutun alku sivulla 7. Poimintavaiheessa tallentuvat myös otsikon alla oleva ohut viiva, pystyyn ladottu kuvaajan nimi ja lehden käyttämä tavutus.

02 · Rakenne

Mikä kuuluu
samaan juttuun?

Esimerkkijuttumme jatkuu kolmelle sivulle. Jotta sen voi lukea yhtenäisenä, ohjelman on löydettävä palstalta toiselle jatkuvat kappaleet ja erotettava jutun sisältö sivun muista teksteistä.

Rakenteen tunnistusvaiheessa kokoamme jutun ensisijaisesti aineiston mukana saaduista tiedoista: mikä on otsikko, mitkä kappaleet kuuluvat yhteen ja mikä teksti liittyy kuvaan. Jos näitä tietoja puuttuu, päättelemme rakennetta kirjasinten, tekstikokojen, sijaintien ja sivun viivojen perusteella. Näin tunnistetaan jutun eri osat ja niiden järjestys.

Painetun lehden sivu 7, jutun eteneminen merkittynä. Sivu 7
Painetun lehden sivu 8, jutun eteneminen merkittynä. Sivu 8
Painetun lehden sivu 9, jutun eteneminen merkittynä. Sivu 9
Viiva seuraa esimerkkijutun 28 osaa kolmen sivun läpi. Rakenteen tunnistusvaiheen jälkeen kuva on vielä ensimmäisenä, kuten painetulla sivulla. Suunnitteluvaiheessa ratkaistaan, missä sen kannattaa olla lukutilassa.

Toimitusjärjestelmän tiedot auttavat tunnistamaan jutun rakenteen.

Foreign Policyn InDesignista tuotetut PDF:t sisälsivät käytännössä kaikki lukutilan tarvitsemat rakennetiedot. Jos tiedot puuttuvat PDF:stä, ne voidaan saada esimerkiksi toimitusjärjestelmän XML-viennistä. Aineiston mukana saadut tiedot menevät aina typografian ja sijaintien perusteella tehtävän päättelyn edelle. Muunnoksessa ei käytetä kielimallia.

Rakennetiedot auttavat järjestämään jutun, mutta teksti ja kuvat otetaan aina lopullisesta PDF:stä. Toimitusjärjestelmän vienti voi sisältää eri version jutusta tai painetusta lehdestä pois jätettyä tekstiä. Lukutila säilyttää painetun version sanasta sanaan.

03 · Suunnittelu

Sama juttu tarvitsee
uuden taiton.

Suunnitteluvaiheessa päätetään jutun osien järjestys, kuvien ja kuvatekstien paikat sekä osien väliin jäävä tila.

Suunnitteluvaihe tuottaa taitto-ohjeen, joka säilyttää lehden typografian mutta ottaa huomioon näytöllä lukemisen. Ohje ei vielä määrää rivinvaihtoja tai palstan leveyttä. Ne ratkeavat vasta lukijan laitteella.

Kuva siirtyy, jotta otsikko näkyy.

Tämän jutun avauskuva on painetulla sivulla otsikon yläpuolella. Jos järjestys säilytettäisiin puhelimessa, kuva täyttäisi ensimmäisen näkymän. Siksi taittosääntö siirtää sen otsikon ja kirjoittajan jälkeen: lukija näkee heti, minkä jutun hän on avannut.

Sivun järjestyksessä

Puhelimen näkymä, jonka täyttää kokonaan jutun kuva. Otsikko ei mahdu näkyviin.

Lukutilassa

Puhelimen näkymä, jossa ylimpänä on otsikko India’s Political Atmosphere Has Changed, sen alla kirjoittajan nimi ja kuvan yläreuna.
Sama juttu vaakatasossa pidetyssä puhelimessa. Molemmat näkymät on piirretty lukutilan omalla taitto-ohjelmalla. Ainoa ero on kuvan paikka.

Taitto-ohje kertoo myös, miksi.

Jokaisen jutun osan yhteyteen tallennetaan siihen vaikuttaneet säännöt. Valitse osa ja tutki, mistä sen ulkoasu tulee ja mitä lukutilaa varten muutetaan. Samat tiedot auttavat meitä korjaamaan sääntöjä, jos jokin näyttää väärältä.

Painetun lehden sivu 7, jutun osat merkittyinä. Sivu 7
Painetun lehden sivu 8, jutun osat merkittyinä. Sivu 8
Painetun lehden sivu 9, jutun osat merkittyinä. Sivu 9
  • Otsikko
  • Kirjoittaja
  • Kuva, kuvateksti ja kuvaaja
  • Leipäteksti
  • Tietolaatikko

Otsikko

Sivu 7

  • Tiempos Headline Light, 24/24 pt
  • vasen tasaus
  • väri #231f20
Kuuluuko lukutilaan?
Kyllä. exclude.default-keep
Missä kohtaa juttua?
Samassa järjestyksessä kuin sivulla. order.default-keep
Kuinka suuri?
Sama suhde kuin painettuna: 2,8 kertaa leipätekstin koko. Kapealla näytöllä hieman pienempi, jotta riville mahtuu tarpeeksi tekstiä. sizing.headline-floor
Minkä värinen?
Sivulta mitattu väri #231f20. ink.default-measured
Miten rivit tasataan?
Vasen tasaus, kuten sivulla. align.default-measured
Saako tavuttaa?
Otsikkoa ei tavuteta. hyphenation.display-off
Sisennetäänkö?
Ei. indent.default-flush
Millaiset välit osan ympärille jäävät?
Alle tulee sivun oma viiva, joka huomioidaan välistyksessä. spacing.rule-seam
Kysymykset ja vastaukset ovat esimerkkijutun taitto-ohjeista. Oletusratkaisut näkyvät himmeämpinä.
Otsikon koko perustuu lehden taittoon.
Otsikon ja leipätekstin kokosuhde otetaan painetulta sivulta. Kapealla näytöllä suurta otsikkoa pienennetään, jotta rivit eivät jää muutaman kirjaimen mittaisiksi.
Lehden oma rytmi.
Osien väliset etäisyydet perustuvat lehden sivuilta mitattuihin väleihin. Ne skaalautuvat tekstikoon mukana, joten taiton rytmi säilyy myös tekstiä suurennettaessa.
Väri kuuluu typografiaan.
Tekstin väri poimitaan sivulta. Jos esimerkiksi kuvan päällä ollut valkoinen kuvateksti siirtyy vaalealle pohjalle, sille valitaan jutun leipätekstin väri, jotta se pysyy luettavana.

Tarkistus

Juttu tarkistetaan
ennen julkaisua.

Automaattinen tarkistus vertaa sisältöä lähteeseen ja tarkistaa taiton mitat.

Tarkistusvaiheessa käytetään samaa taitto-ohjelmaa kuin lukijan laitteella. Jos juttu ei läpäise tarkistusta, sille ei tarjota lukutilaa. Juttu on silloin luettavissa alkuperäisellä lehden sivulla.

Sisältöä verrataan alkuperäiseen juttuun.
Automaattinen tarkistus varmistaa, että jutun jokainen sana on mukana kerran ja teksti etenee samassa järjestyksessä kuin lehdessä.
Taiton mitat tarkistetaan.
Kuvien pitää olla mukana, rivien mahtua palstan leveyteen ja osien asettua paikoilleen ilman päällekkäisyyksiä.
Ulkoasu arvioidaan myös silmämääräisesti.
Kehitystyössä vertaamme lukutilaa lehden sivuun myös silmämääräisesti. Havainnot auttavat parantamaan sääntöjä seuraavia juttuja varten.

Esimerkkijuttu läpäisi tarkistuksen: kaikki 28 osaa ja jokainen sana mukana.

04 · Piirto

Lopullinen taitto syntyy
lukijan näytöllä.

Kun lukija avaa jutun, sen rakenne ja taitto-ohje ovat valmiina. Piirtovaiheessa laite sovittaa jutun käytettävissä olevaan leveyteen: laskee rivinvaihdot, tasaa sanavälit ja piirtää sisällön.

Teksti piirretään samoilla kirjaimilla, jotka poimittiin alussa PDF:stä. Näin mukana säilyvät kirjasinten muodot ja sanojen sisäiset kirjainvälit. Kun lukija suurentaa tekstiä tai kääntää laitetta, ohjelma laskee rivit uudelleen saman taitto-ohjeen pohjalta.

Kirjasinnäyte: suuri D-anfangi, jonka vieressä leipätekstin pienet ja isot kirjaimet, numerot ja välimerkit sekä kursiivi. Alla otsikon suuret kirjaimet ja kuvatekstien päätteetön kirjasin kahdessa koossa.
Näyte esimerkkijutun PDF:stä poimituista kirjaimista. Suuri D aloittaa tekstin myös lukutilassa. Kirjainten koot on tässä esitetty samassa suhteessa kuin painetulla sivulla.
Suomen kielen tavutus.
Suomenkielisten juttujen tavutuksessa otetaan huomioon yhdyssanat ja käytetään apuna lehden omia tavutuskohtia. Se auttaa välttämään liian väljiä rivejä ja suuria sanavälejä kapealla näytöllä.
Sama taitto-ohjelma eri ympäristöissä.
Palvelimen tarkistus, selain ja iOS-sovellus käyttävät samaa taitto-ohjelmaa. Lukutilan rivitystä ja mitoitusta voidaan siksi kehittää ja tarkistaa yhdessä paikassa.
Richie Editions Sivuntoiston tekniikka

Jutellaan lukutilasta.

Esittelemme mielellämme lukutilaa lehtenne omilla jutuilla.

Sähköposti

hello@richie.fi

Puhelin

09 4241 4122