CSS tip pro tisk odkazů

in code

Před pár týdny jsem tu psal článek o tom, jak spousta serverů kašle na tisknutelnou formu webu. Dnes bych to chtěl doplnit o jeden hezký CSS tip, který tisknutelnou formu bezvadně vylepší!

Přesněji jde o tisknutí odkazů; představte si scénář: přijdete na web, vidíte zajímavý článek, vytisknete si ho, později si ho přečtete, je tam odkaz na nějaký další materiál a na ten se chcete po přečtení také podívat. Ale co se nestane! Už nevíte, kde jste na článek narazili a URL adresa článku se nevytiskla nebo je neúplná. Co teď? Teď zbývá jen doufat, že Google článek nalezne (bude i existovat nebo bude v Googlí cache) a tam i hledaný odkaz.

Celé to lze mít ale jednodušší – stačí do tisknutelné formy tisknout i URL adresy. Že to je nesmysl? Že by nestačilo pouze CSS, ale bylo by potřeba přidat podporu do systému? Ale kdeže… jednoduché CSS postačí. :)

Tento řádek:

a:after { content: " (" attr(href) ")"; }

stačí vložit do CSS souboru určený pro tisk a je hotovo. Při tisku se za text odkazu přidá mezera následovaná závorkou s textem převzatým z atributu href. Jak jednoduché!

Ještě doporučím zrušit podtržení – bez něj to vypadá lépe. :)