Baseline.js a Basehold.it – drobná vylepšení pro typografii na webu

Dnes mám pro vás malý tip na malé vylepšení vašich webů, které souvisí s typografií. A myslím, že jej málokdo řeší. Jak jste na tom se zarovnáváním obrázků do pomyslných textových řádků a dodržováním řádkování?
reklama

Nejenom článkové weby vkládají do textu nějaké obrázky. Kombinaci textů a obrázků najdete úplně všude. Ale ne každý si uvědomí, že vložený obrázek nemusí svou výškou plně respektovat řádkování. Pokud nějaký obrázek vychází svou výškou třeba do půli řádku, prohlížeč za něj přidá standardní mezeru a pravidelnost řádkování je narušena. Jindy můžete pravidelnost řádkování narušit třeba sami vlastními zápisy CSS.

Baseline.js

Právě k řešení tohoto problému vznikl jednoduchý plugin pro jQuery nazvaný Baseline.js. Jak funguje je nejlépe vidět z příkladu na jeho webové stránce. Po napojení do stránky zavoláte aktivaci tohoto pluginu ve svém skriptu a nastavíte základní výšku řádku. Obrázky v uvedeném selektoru se pak automaticky odsadí tak, aby řádkování vycházelo.

Líbí se mi, že Baseline.js také počítá s responsivními weby. V syntaxi jeho aktivace tak můžete uvést alternativní výšku řádků pro případ, že rozměr vykreslovací plochy prohlížeče převyšuje určitou hodnotu.

Ukázka před aplikací Baseline.js

Tentokrát nebudu uvádět žádné příkladové kódy, použití je tak jasné, že nepotřebuje dodatečný komentář a pochopíte jej z příkladu na domovské stránce Baseline.js. Najdete ji na adrese daneden.me/baseline.

Ukázka po aplikaci Baseline.js

Basehold.it

Pokud si chcete zkontrolovat, jak řádkování vychází právě na vašem webu, není nic jednoduššího, než si na jeho pozadí vložit pomyslný papír s řádky. Ne, ve Photoshopu ani jiném editoru nic takového kreslit nemusíte, stačí využít službu Basehold.it.

Do kódu hlavičky webové stránky totiž stačí vložit následující řádek a na webu se vám poté nakreslí řádkování přes všechny elementy na stránce. Snadno tak zjistíte, jak jej na webu dodržujete.

<link rel="stylesheet" href="http://basehold.it/24">

Číslo 24 v tomto případě určuje velikost řádkování na 24px. Můžete jej libovolně upravit podle velikosti řádkování na svém webu.

Jak po takové úpravě dopadl Maxiorel, můžete kouknout na následujícím obrázku. Jak je vidět, je tu hodně co zlepšovat.

Maxiorel.cz s řádky Basehold.it

Tip: Basehold.it ve Firebugu

Používáte-li Firebug, můžete Basehold.it vyzkoušet na svém webu i bez toho, že byste ukládali změnu v HTML struktuře a web by tak, byť na krátkou dobu, mohli vidět „počmáraný“ i jeho návštěvníci. Výše uvedený řádek si zkopírujte do schránky. Načtěte svůj web a zobrazte Firebug.

Přepněte se v něm do režimu HTML a ve struktuře stránky klepněte pravým tlačítkem myši na značku <head>. Poté zvolte funkci Paste HTML > As last child.

Tagy
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru