Formatera utskrifter med CSS

Den senaste månaden har vi jobbat en hel del med pappersutskrifter av olika det slag, så det kan nog bli en del blogg-material om det i framtiden.

Tänkte börja med grunderna i för hur man formaterar en sida för utskrifter med CSS. Ofta vill man ju inte att allt som syns på skärmen ska komma mer på utskriften, då lägger man till en separat stilmall enligt följande.

<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />

I denna stilmall kan det vara bra att ställa in fontstorleken i punkter. Här kommer ett exempel där jag har angett hur all text ska visas i body-elementet. Font-storleket har jag satt till 7 punkter som ger en rätt liten text och gör att man får plats med mer på ett papper. Vit bakgrund är ju också bra om man har något annat i sin riktiga stilmall. Grådaskiga utskrifter är inget bra och drar en hel del bläck i onödan.

body {
color : #000000;
background : #ffffff;
font-family: Verdana, Arial, Helvetica, san-serif;
font-size : 7pt;
}

De delar som inte ska vara med på utskriften sätter man till display till none, så här:

#dontPrintElementWithThisId,#header,#footer {
display:none;
}

37Signals skriver mer om hur man gömmer element på utskrifter och hur man kan formatera en blogg så den blir snygg på papper.

Sen ett sjysst tips på Snook.ca som förklarar hur man kan ange vart en ny sida ska börja när man skriver ut. Det kände jag inte till innan men har eftersökt ett sätt att göra detta på.

#alwaysStartNewPageOnThisElement {page-break-before:always;}

CSS, Utskrifter

Comments

Jani Sjölund Wrote:

3:e Augusti 2007

Jättebra tips om var man kan ange ny sida börjar. Undrar ifall du har någon aning med display:none. <div id="wrapper">
<div id="content">
Innehåll
</div>
</div> Om jag vill att bara #content skall visas så skall jag använda #wrapper {display:none} men då försvinner även #content då den ärver från hierarkin.. Anledningen till detta är att jag vill ta bort alla "wrappers som positionerar sig snyggt men i utskrift skall det ligga mot vänster/top. PS: Jag testade med #content {display: inline !important} men jag får inte fram lagret. Tacksam för tips.

Jani Sjölund Wrote:

3:e Augusti 2007

Opps.. min kod renderades..

Jesper Wrote:

3:e Augusti 2007

Hehe, min layout blev rätt skum med din extra markup. Jag får göra något åt mitt kommentarsfält så man kan posta html. Tills dess kan ni bara köra på så editerar jag det manuellt. Jag html-encodade din kod. Nu till problemet. Jag tror inte det går att göra så som du provat. Gjorde själv lite tester och fick inte heller till det. Hos W3C kan man läsa om 'display' property. "display:none - This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either; this behavior cannot be overridden by setting the 'display' property on the descendants. Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details." Så #wrapper finns alltså inte längre i dokumentet, och dess underelement kan inte heller visas. Det du kan göra i ditt fall är väl att modifiera CSS för #wrapper så den uppför sig som du vill (Istället för att ta bort den helt). Sätta text-align:left och nollställa eventuell margin eller padding så det blir bra på utskriften. Och ja, att kunna ange var en ny sida ska börja är ju kanon. Har inte provat själv men låt mig gärna veta om du fått det att fungerar.

Jani Sjölund Wrote:

3:e Augusti 2007

Jo, jag tror det blir att hacka wrapper (alla properties till defaul-läge9). Problem som ofta uppstår är dock ifall det är innehåll som kommer från CMS så div kan få id = 1, 2,3, osv.. och då blir det lite knivigare ;-) På tal om utskrifter så kolla in den här sidan med Firefox och gör "Print Preview": http://www.ikea.com/ms/sv_se/complete_kitchen_guide/kitchen_know-how/do_it_yourself/installation_1.html"> http://www.ikea.com/ms/sv_se/complete_kitchen_guide/kitchen_know-how/do_it_yourself/installation_1.html Ställer till lite problem, då sida 1 skrivs bara ut..

Jesper Wrote:

3:e Augusti 2007

Ja det är ju en svårighet när id är dynamiskt genererade. Vilket CMS är det du jobbar med? I ASP.NET kan det också bli en del svårigheter eftersom ramverket sätter på extra prefix på id om taggarna är server-genererade. Jag har t ex ett element på denna bloggen med id 'ctl00_cphLeft_panelBlogComments'. Ojdå, IKEA borde se över sina utskrifter. Undrar varför det blir så att inte allt kommer med. Intressant att de har så många stylesheets också. Fick det till 10 stycken på den sidan, en speciell bara för footern. Det kan iofs vara ett bra sätt att strukturera det hela, men jag brukar oftast klämma in allt i en enda stilmall. Fast jag ska inte säga så mycket, denna bloggen blir inte heller så snygg på utskrifter. Men det ska jag fixa till snart.

Jesper Wrote:

3:e Augusti 2007

Så där nu har jag formaterat bloggen så den blir lite bättre på utskrift. Lyckades hacka min wrapper så att texterna går ända ut på sidorna. "page-break-before:always;" ser ut att fungera bra. La detta innan kommentarerna så att besökaren kan välja att skriva ut dessa i sin "print-dialog", genom att specificera vilka sidor han vill ha med. Kom även på ett nytt knep. Eftersom jag gömt headern helt så kommer inte sidans namn med. Då la jag till följade CSS-regel i print.css. #left:before { content: "Code Odyssey - Utskriftsversion" } Då kan man välja vad som ska stå överst i utskrifterna. Vill ni se hur min CSS för utskrifter ser ut nu kan ni kolla här: http://codeodyssey.se/css/print.css

Jani Sjölund Wrote:

8:e Augusti 2007

Hej, CMS-verktyget som jag arbetar mest just nu med är Joomla!, försöker komma in i Drupal också. Arbetar ni med eget system eller commerciellt/open source CMS?

Jesper Wrote:

9:e Augusti 2007

Ok, jag har fått Joomla demonstrerat för mig lite snabbt och det verkar bra. Även Drupal verkar bra men har aldrig haft nöjet att prova på det. Vi gör våra egna CMS-system som oftast är skräddarsydda för kundens behov.

Jani Sjölund Wrote:

9:e Augusti 2007

Fördelen är just med egenutvecklat att det blir som man önskar sig, Joomla! erbjuder bra platform/framework som bas, men sedan får man modifiera själv moduler och templates så att dessa passar i varje projekt. Ny version av Joomla! på gång snart så då blir det ännu bättre..

Jani Sjölund Wrote:

9:e Augusti 2007

Fördelen är just med egenutvecklat att det blir som man önskar sig, Joomla! erbjuder bra platform/framework som bas, men sedan får man modifiera själv moduler och templates så att dessa passar i varje projekt. Ny version av Joomla! på gång snart så då blir det ännu bättre..

Jesper Wrote:

10:e Augusti 2007

Jo det är oftast till fördel att köra egenutvecklat, men ibland undrar man ifall det är värt det med alla bra CMS-system som finns att använda gratis. Har hört talas om Joomla's nya system, det låter intressant. En sak som en kollega undrar över är ifall det finns stöd för URL-omskrivning i Joomla. Han använder det som CMS men vill kunna få snyggare URLer som inte innehåller querysträngar och filändelser.

Jani Sjölund Wrote:

13:e Augusti 2007

hej, ursäkta att det har tagit några dagar emellan. Har varit på resa. Jo, URL-omskrivning, eller Friendly-URLs finns, däremot har jag av någon konstig anledning inte använt sedan jag stötte på några problem med Joomla! + joomfish (språkhanterare för Joomla!) I andra fall är det bara att gå via Joomla! kontrollpanel och kryssa i för att använda URL-omskrivning. Givetvis måste .htaccess-filen vara förberedd med några rader men inte några problem som jag känner till. Han hittar det under "Site - Global configuration - SEO". Om man mot förmodan inte får detta att fungera, be honom testa Joomla SEF Patch (http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,490/Itemid,35/), hjälper mot problem, eller så finns det flera moduler för SEF (http://extensions.joomla.org/component/option,com_mtree/task,listcats/cat_id,1803/Itemid,35/) Vad gäller för vårt företag så har vi konstaterat att ibland vill man med fördel använda open source-CMS då man inte själv behöver lägga ner fruktansvärt med utvecklingstid för alla funktioner som man vill lägga in, utan vi försöker dela med oss genom ex. så här, eller att vi är med i forum och hjälper andra. Har ex. varit involverad i ett projekt där en utvecklare kopplade upp sig mot finländska e-betalningar/VISA och han hade inte fått det att fungera så jag hittade lösningen (en kund ville ha betalningslösning) så jag var glad att kunna dela med mig av den lösningen så att andra kan använda den också. Happy knowledge-sharing helt enkelt ;-)

Jesper Wrote:

17:e Augusti 2007

Tack så mycket för tipsen om möjligheterna till URL-omskrivning i Joomla. Ska skicka vidare detta till min kollega. Möjlighet till URL-omskrivning är något jag är lite avundsjuk på er som jobbar med Apache-servrar. På Microsofts IIS är det inte alls lika lätt att modifiera sökvägarna. Men i februari 2008 släpps ju äntligen "Longhorn" som kommer ha bättre stöd för detta. Jo det finns ju mycket att vinna genom att använda open-source lösningar. Och visst är det roligt med utvecklare som gärna delar med sig av sina lösningar. Tack förresten till en väldigt givande diskussion, nu känns det verkligen som vår blogg börjar bli värd att skriva när man får så bra respons och inspiration i kommentarerna.