Keskustelu: Nettisivujen teko: Wordpress ja otsikoiden tavuttaminen manuaalisesti

Mulla on (WP 4.1) teemassa asennettu wp-typography plugin. Siitä huolimatta tavutus menee huonosti suomenkielisenä. Miten saan manuaalisesti rivitettyä/tavutettua tekstiä siten kun itse haluan (ja siten kuin se suomenkielisenä parhaalta näyttää)? Tämä ongelma esiintyy siis etenkin puhelimella katsottuna...

Kiitos vastauksista jo etukäteen...

Unicode sisältää tavutusvihjettä kuvaavan merkin (soft hyphen, U+00AD, HTML-entiteettinä ­ tai ­).

Kiitos tiedosta. Voitko vääntää mulle vielä asian rautalangasta (että minkä koodin noista laitan titleen)?
Eli kun puhelimella katsoo sivustoa, niin silloin tietyt otsikot tavuttaa ihan miten sattuu... Tuossa alla linkki, olisi mukavaa jos viitsisit/viitsisitte käydä katsomassa ja kommentoimassa miten mun kannattaisi toteuttaa ko probleema...

Kotisivu-projekti

Tuo ­ nimenomaan paikkoihin jossa haluat tavuviivan tulevan tarpeen vaatiessa. Esim. Nordtec-​​poi­kit­tais­­ruu­vi­lin­got.

Kiitos vastauksesta. Vielä yksi lisäkysymys:

Kuinkas sitten teen kun haluan seuraavan kokonaisen sanan alkamaan uudelta riviltä (ei siis väliviivaa)? Vai tekeekö se wordpress sen automaattisesti riippuen laitteen näytön koosta?

Lisäys: Ja mulla on käytössä All in One SEO Pack-plugin ja jotenkin näyttää että mulla ei tavuta oikein tuon pluginin otsikkoja (page titlejä ym). Voiko tuolle tehdä jotain?

Mainitsenpa vaan, että ”CSS3” tuo mukanaan ominaisuuden hyphens, jonka avulla selaimen saa tavuttamaan automaattisesti.

Tavutus otetaan käyttöön asettamalla ominaisuuden arvoksi auto ja poistetaan käytöstä arvolla none. Arvolla manual selaimelle kerrotaan, että teksti halutaan taivuttaa käsin käyttäen pehmeää yhdysmerkkiä (eli juuri tuota &shyta).

Arvot none ja manual ovat tarpeellisia yleensä vain silloin, kun halutaan ylikirjoittaa arvo auto. Nonen avulla voidaan lisäksi estää pehmeän yhdysmerkin toiminta.

On tärkeää varmistaa, että HTML-dokumentin kieli on määritelty asianmukaisesti, käyttämällä lang-attribuutteja.

Selaintuki: http://caniuse.com/css-hyphens (Firefox: etuliite -moz-, Safari: etuliite -webkit-, IE 10+: etuliite -ms-, muut: ei tukea)
Demo: http://codepen.io/anon/pen/NPbRBg/left/?editors­=110

Päivitys: IE:n tukitiedot lisätty ja Safarin korjattu.

jhh kirjoitti:

Mulla on (WP 4.1) teemassa asennettu wp-typography plugin. Siitä huolimatta tavutus menee huonosti suomenkielisenä.

Jos jokin plugin tavuttaa väärin, niin kannattaa ihan ensimmäiseksi poistaa se käytöstä.

Toiseksi kannattaa huomata, että otsikoiden tavuttaminen on lähinnä typografinen virhe. Jos otsikon tavuttaminen tuntuu tarpeelliselta, kannattaa keskittyä pikemminkin ongelman ratkaisemiseen: otsikon lyhentämiseen tai otsikolle varatun tilan leventämiseen.

Lisäys:

HTML5 kirjoitti:

Selaintuki: http://caniuse.com/css-hyphens (Firefox: etuliite -moz-, Safari: etuliite -moz-, muut: ei tukea)

Minun silmilläni katsottuna tuolla kyllä lukee, että IE tukee versiosta 10 alkaen, kun käytetään -ms-etuliitettä.

Eri asia on, mitä kieliä mikin selain tukee (tavutuksessa). IE ei tiettävästi tue suomea. Joka tapauksessa Chromen kiinnostumattomuus asiasta merkitsee, että `hyphens` ei ole kovin käytännöllinen ratkaisu.

Jos halutaan tavuttaa tekstiä, niin realistisia vaihtoehtoja ovat a) käsin tavutus pehmeällä tavuviivalla ja b) tavutus selaimessa JavaScriptillä, esimerkiksi Hyphenator.js (jonka suomen kielen tuki jättää paljon toivomisen varaa, mutta ei ole ihan toivoton, ja on konffattavissa).

Eri asia on, että otsikon pitäisi normaalisti mahtua yhdelle riville, eikä sitä ainakaan pitäisi tavuttaa.

Yucca kirjoitti:

– – Minun silmilläni katsottuna tuolla kyllä lukee, että IE tukee versiosta 10 alkaen, kun käytetään -ms-etuliitettä. – –

Oho, niinpä näkyy. Korjattu.