Kuinka luoda perusteltu teksti CSS: llä

Tekstin oikeuttaminen CSS Text-Align -ominaisuuden avulla

Yksi verkkosivuston typografian ominaisuuksista, jonka voit säätää sivuston kehittämisen aikana, on, miten sivuston teksti on perusteltu. Oletuksena sivuston teksti on perusteltu, ja näin monta sivustoa jättää tekstinsä. Ainoat muut vaihtoehdot ovat oikeutettuja, joita kukaan ei käytä verkkosivuilla, koska se tekisi tekstin olennaisilta osin mahdottomaksi lukea verkossa tai mikä on täysin perusteltua.

Oikeutettu teksti on tekstin lohko, joka kohdistuu sekä vasemmalle että oikealle sivulle, toisin kuin vain yhdelle puolelle (mikä on "vasen" ja "oikea" oikeutus). Kaksinkertaisesti perusteltu vaikutus saavutetaan säätämällä sana- ja kirjaintiloja kussakin tekstirivissä sen varmistamiseksi, että jokainen viiva on sama. Tätä vaikutusta kutsutaan täydelliseksi perusteluksi . Voit perustella tekstiä CSS: ssä tekstilokiominaisuuden avulla .

Miten toimivuus toimii?

Syy, jonka usein näet epätasaisen reunan tekstin lohkon oikealla puolella, johtuu siitä, että jokainen tekstirivi ei ole sama pituus. Joillakin rivillä on enemmän sanoja tai pitkiä sanoja, kun taas toisilla on vähemmän tai lyhyempiä sanoja. Tekstin lohkon perustelemiseksi on lisättävä joitain viivoja, jotta kaikki viivat voidaan tasata ja tehdä niistä johdonmukaisia.

Jokaisella verkkoselaimen valmistajalla on oma algoritmi ylimääräisten tilojen lisäämiseksi riville. Selaimet tarkastelevat sanojen pituutta, tavutusta ja muita tekijöitä, joilla määritetään, mihin sijoitetaan tilat.

Tämän seurauksena perusteltu teksti ei ehkä näytä identtiseltä selaimesta toiseen. Tämä on hieno, sillä sivuston kävijä ei hyppää selaimesta toiseen vain verrata sivustosi rivin pituutta. Varmista kuitenkin, että suuri selaintuki on hyvä perustella tekstiä CSS: llä.

Teksti oikein

Tekstin perusteleminen CSS: n kanssa edellyttää tekstin osan perustelemiseksi.

Tyypillisesti tämä tapahtuu tekstin kohdissa, koska suuret tekstikokoelementit, jotka kattavat useita rivejä, merkitään kohdetunnisteilla.

Kun olet lukenut tekstin, joka on perusteltua, on vain asia, jonka tyyli asetetaan CSS- tekstin mukaisen tyyliominaisuuden perustelemiseksi.

teksti-align: justify;

Sinun tulisi soveltaa tätä CSS-sääntöä sopivaan valitsimeen saadaksesi tekstin lohkon tekemään tarkoitetulla tavalla.

Milloin perustellaan tekstiä

Monet ihmiset pitävät perusteltujen tekstien ulkoasua suunnittelun näkökulmasta, suurelta osin siksi, että se luo hyvin johdonmukaisen ja mitatun ulkoasun, mutta sivut ovat täysin perusteltuja verkkosivulla.

Ensinnäkin perusteltua tekstiä voi olla vaikea lukea. Tämä johtuu siitä, että kun perustelet tekstiä, voi joskus lisätä joitain ylimääräisiä tiloja rivin joidenkin sanojen välillä. Nämä epäjohdonmukaiset aukot voivat vaikeuttaa tekstin lukemista. Tämä on erityisen tärkeää verkkosivuilla, joita voi olla vaikea lukea jo valaistuksen, resoluution tai muun laitteiston laadun vuoksi. Tekstin epätavallisten tilojen lisääminen voi pahentaa huonoa tilannetta.

Lukemiskysymysten lisäksi tyhjät tilat ovat joskus ristiriitaisia ​​keskenään luomaan "jokia" valkoiselle tilalle tekstin keskelle.

Nämä suuret aukot valkoisella tilalla voivat todella tehdä hankalaa näyttöä. Lisäksi äärimmäisen lyhyillä viivoilla perustelut voivat aiheuttaa viivoja, jotka sisältävät yhden sanan, jossa on enemmän välilyöntejä kirjainten välillä.

Joten milloin sinun pitäisi käyttää tekstin perustelua? Paras aika tekstin oikeuttamiseen tapahtuu, kun rivit ovat pitkiä ja kirjasinkoko on pieni (jotain, jota on vaikea varmistaa reagoivilla verkkosivustoilla, joilla rivin pituudet muuttuvat näytön koon mukaan). Viivan pituuden tai tekstin kokoa varten ei ole kovaa ja nopeaa numeroa, sinun on käytettävä parasta arviota.

Kun olet asentanut tekstin mukaisen tyylin tekstin oikeuttamiseksi, testaa se varmistaaksesi, ettei tekstillä ole valtavia väyliä - ja varmista, että se testataan eri kokoluokissa.

Helpoin tapa tehdä tämä on katsella sitä silmätuilla silmillä. Joet erottuvat valkoisiksi pilkeiksi muutoin harmaalla tekstilohkolla. Jos näet jokia, sinun on tehtävä muutoksia tekstin kokoon tai tekstilohkon leveyteen päästäkseen eroon näistä rumaista jokista.

Käytä vain perusteluja sen jälkeen, kun olet verrannut sitä vasemmanpuoleiseen tekstiin tässä artikkelissa. Teet kuten koko oikeutuksen johdonmukaisuus, mutta tavallinen vasen perusteltu teksti on yleensä luettavampi. Lopuksi kannattaa perustella tekstiä, koska olet valinnut tekstin perustelut suunnittelustarkoituksiin ja vahvistanut, että sivustosi on helppo lukea.