Formatierung der Druckansicht beeinflussen

Veröffentlichungsdatum: 08. November 2019
Änderungsdatum: 10. Mai 2022

weblication cms print drucken druckvorschau formatierung

Die Ausgabe der Webseiten für die Druckvorschau können Sie über das Drucktemplate und die separate CSS-Datei beeinflussen.

Um Ihre Webseiten für den Ausdruck von Webseiten zu optimieren, können Sie zum einen über "@media print" Angaben im CSS speziell auf die Druckfunktion des Browsers eingehen. Dies wird in diesem Artikel nicht weiter beschrieben, da diese Formatierungsmöglichkeit als allgemein CSS-Technik hinreichend im Netz beschrieben ist (siehe z.B. weiterführende Links unten).

Dieser Artikel geht nachfolgend auf die spezielle Umsetzung der Druckvorschau zu Weblication® Projekten ein.
Beim Einsatz der Druckvorschau von BASE Projekten passen Sie das verwendete Drucktemplate und die CSS-Datei an.

BASE (Mobile First) Projekte
BASE Classic Projekte
BASE (Mobile First) Projekte

Fall: Projekt mit dunklem Hintergrund und weisser Schriftfarbe

Im Beispielfall nehmen wir folgendes an:

Ihr Projekt ist mit dunklem Hintergrund (Hintergrundbild oder Hintergrundfarbe) und weisser Schriftfarbe umgesetzt. Standardmässig wird die BASE so ausgeliefert, dass die CSS-Datei für die Druckansicht die Schriftfarbe nicht gesondert definiert und somit von der zentralen CSS-Datei übernimmt.

Sie wollen nun den Ausdruck mit schwarzer Schriftfarbe auf weißem Hintergrund haben.

Lösung:
Definieren Sie über die print.css für das body-Tag (evtl. auch andere CSS-Klassen) eine schwarze Schriftfarbe (color:#000000). Die print.css wird im Drucktemplate (print.wDocument.php) nach der zentralen CSS-Dateieingelesen und übersteuert somit die dort hinterlegte Schriftfarbe.

Beispiel: Inhalt des Ausgabetemplates /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/print.wDocument.php

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xslIfIsInEditor="http://www.w3.org/1999/XSL/TransformIfIsInEditor" xmlns:wslPre="http://weblication.de/5.0/wsl" xmlns:wslPost="http://weblication.de/5.0/wsl" xmlns:wslEditorPre="http://weblication.de/5.0/wsl" xmlns:wsl="http://weblication.de/5.0/wsl" xmlns:wd="http://weblication.de/5.0/wd" xmlns:php="http://php.net/xsl" exclude-result-prefixes="xslIfIsInEditor wd wslPre wsl php" version="1.0">
  
  <xsl:output method="xml" indent="yes" omit-xml-declaration="no" encoding="UTF-8"/>
  
  <!-- Weblication BASE Mobile First Version 0.9.19 -->

  <!-- System-Parameter einbinden -->
  <xsl:include href="$XSLTPRE[wDocumentRoot]/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/standard.wParams.php" wd:pathTemplate="misc/standard.wParams.php"/>

  <!-- Header einbinden -->
  <xsl:include href="$XSLTPRE[wDocumentRoot]/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/headers/default.wHeader.php" wd:pathTemplate="headers/default.wHeader.php"/>

  <!-- Global-Templates dynamisch einbinden -->
  <wslPre:includeXsltGlobals project="/[IHR-LAYOUT-PROJEKT]" useIndex="1"/>

  <!-- Objekte-Templates dynamisch einbinden - Eine Seite ist von einem bestimmten Objekttyp -->
  <wslPre:includeXsltObjects project="/[IHR-LAYOUT-PROJEKT]" _object="objectArticle" useIndex="1"/>

  <!-- Elemente-Templates dynamisch einbinden - Eine Seite beinhaltet beliebig viele, vom Redakteur eingefügte, Elemente -->
  <wslPre:includeXsltItems project="/[IHR-LAYOUT-PROJEKT]" useIndex="1"/>

  <!-- Meta-Maske einbinden - Falls die Seite im Editor aufgerufen wird -->
  <xslIfIsInEditor:include href="$XSLTPRE[wDocumentRoot]/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/editmasks/standard.metadata.php" wd:pathTemplate="editmasks/standard.metadata.php"/>

  <!-- Definition der Darstellung -->
  <xsl:template match="/wd:document" wChecksum="95973f5f65dc085b0b817ba80c595a84">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="{$wLanguageProject}">
      <head>
        <!-- HTML-Kopf -->
        <xsl:call-template name="htmlHead" wd:pathTemplate="globals/content.wGlobal.php#htmlHead"/>
        <link rel="stylesheet" href="/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/print.css"/>
      </head>
      <body>
        <xsl:attribute name="class">print body<xsl:value-of select="$wPageDisplayType"/> project-<xsl:value-of select="php:functionString('str_replace', '/', '', php:functionString('wProjectCur::getPath'))"/> subdir-<xsl:value-of select="php:functionString('wPathName::getDirName', php:functionString('wPathName::getDirTop', $wDocumentDir, 2))"/> object-<xsl:value-of select="/wd:document/wd:extension/wd:object/@type"/><xsl:if test="/wd:document/wd:extension/wd:object/wd:data[@id = 'objectLayout']/text()"> object-<xsl:value-of select="/wd:document/wd:extension/wd:object/@type"/>_var<xsl:value-of select="/wd:document/wd:extension/wd:object/wd:data[@id = 'objectLayout']/text()"/></xsl:if></xsl:attribute>
        <!-- Hier wird die Maske zur Pflege der Metadaten eingebunden, falls man sich im Editor befindet -->
        <xsl:if test="$wIsInEditor = '1'">
          <xsl:call-template name="templateEditor"/>
        </xsl:if>

        <div id="blockMain">
          <div id="blockMainInner">
            <div id="blockHeaderPrint">
              <div>

                <!-- Logo -->
                <xsl:call-template name="logo" wd:pathTemplate="misc/includes.global.php#logo"/>

                <button id="printButton" onclick="window.print()"><xsl:value-of select="php:functionString('wTexts::getText', 'print')"/></button>
              </div>
            </div>

            <div id="blockContent"><xsl:if test="wd:extension/wd:object/@type = 'start'"><xsl:attribute name="id">blockContentStart</xsl:attribute></xsl:if>
              <div id="blockContentInner">
                <!-- Inhaltegruppe 1 (content1) des Objektes (der Seite)-->
                <xsl:call-template name="content1" wd:pathTemplate="globals/content.wGlobal.php#content1"/>
                <div class="clearBoth"> </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Globale Elemente am Ende des Body-Tags -->
        <xsl:call-template name="bodyPost" wd:pathTemplate="globals/bodyPost.wGlobal.php"/>
        
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>

Beispiel: Inhalt der CSS-Datei /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/print.css

/* Druckansicht */

body {
  background:transparent;
  color:#000000;
}

#blockHeaderPrint {
  background:#ffffff;
  padding:1rem;  
}

.logoImgFull {
  display:none !important;
}

#blockHeaderPrint > div {
  max-width:1200px;
  margin:0 auto;
}

.wglButton {
  display:none;
}

#printButton {
  float:right;
}

@media print {
  #printButton {
    display:none;
  }
}

Weitere Anpassungen nehmen Sie entsprechend vor. So können Sie auch die HTML-Struktur über das Ausgabetemplate komplett anpassen.

BASE Classic Projekte

Fall: Projekt mit dunklem Hintergrund und weisser Schriftfarbe

Im Beispielfall nehmen wir folgendes an:

Ihr Projekt ist mit dunklem Hintergrund (Hintergrundbild oder Hintergrundfarbe) und weisser Schriftfarbe umgesetzt. Standardmässig wird die BASE so ausgeliefert, dass die CSS-Datei für die Druckansicht die Schriftfarbe nicht gesondert definiert und somit von der zentralen CSS-Datei (design.css) übernimmt.

Sie wollen nun den Ausdruck mit schwarzer Schriftfarbe auf weißem Hintergrund haben.

Lösung:
Definieren Sie über die print.css für das body-Tag (evtl. auch andere CSS-Klassen) eine schwarze Schriftfarbe (color:#000000). Die print.css wird im Drucktemplate (print.wDocument.php) nach der zentralen CSS-Datei (design.css) eingelesen und übersteuert somit die dort hinterlegte Schriftfarbe.

Beispiel: Inhalt des Ausgabetemplates /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/print.wDocument.php

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xslIfIsInEditor="http://www.w3.org/1999/XSL/TransformIfIsInEditor" xmlns:wslPre="http://weblication.de/5.0/wsl" xmlns:wslPost="http://weblication.de/5.0/wsl" xmlns:wslEditorPre="http://weblication.de/5.0/wsl" xmlns:wsl="http://weblication.de/5.0/wsl" xmlns:wd="http://weblication.de/5.0/wd" xmlns:php="http://php.net/xsl" exclude-result-prefixes="xslIfIsInEditor wd wslPre wsl php" version="1.0">
<!-- Source: base.standard, 002.003.119.000 (2019-10-25 12:30:13)-->
  <xsl:output method="xml" indent="yes" omit-xml-declaration="no" encoding="UTF-8"/>
                            
  <!-- System-Parameter einbinden-->
  <xsl:include href="$XSLTPRE[wDocumentRoot]/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/standard.wParams.php"/>
    
  <!-- Zentrale Funktionen, Templates und Skripte einbinden -->   
  <xsl:include href="$XSLTPRE[wDocumentRoot]/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/includes.global.php"/>  

  <!-- Objekte-Templates dynamisch einbinden -->   
  <wslPre:includeXsltObjectsProject project="/[IHR-LAYOUT-PROJEKT]" useIndex="0"/>  
  
  <!-- Elemente-Templates dynamisch einbinden -->
  <wslPre:includeXsltItemsProject project="/[IHR-LAYOUT-PROJEKT]" useIndex="0"/>
  
  <!-- Meta-Maske einbinden, falls die Seite im Editor aufgerufen wird -->
  <xslIfIsInEditor:include href="$XSLTPRE[wDocumentRoot]/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/editmasks/standard.metadata.php"/>

  <!-- Definition der Darstellung -->
  <xsl:template match="/wd:document" wChecksum="dacf2f5222031ae9659e49f221d7afaf">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="{$wLanguageProject}">
      <head>                     
        <!-- HTML-Kopf -->
        <xsl:call-template name="htmlHeader"/>
        <link rel="stylesheet" href="/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/print.css"/> 
      </head> 
      <body>
        <xsl:attribute name="class">print body<xsl:value-of select="$wPageDisplayType"/> project-<xsl:value-of select="php:functionString('str_replace', '/', '', php:functionString('wProjectCur::getPath'))" /> subdir-<xsl:value-of select="php:functionString('wPathName::getDirName', php:functionString('wPathName::getDirTop', $wDocumentDir, 2))" /> object-<xsl:value-of select="/wd:document/wd:extension/wd:object/@type" /><xsl:if test="/wd:document/wd:extension/wd:object/wd:data[@id = 'objectLayout']/text()"> object-<xsl:value-of select="/wd:document/wd:extension/wd:object/@type" />_var<xsl:value-of select="/wd:document/wd:extension/wd:object/wd:data[@id = 'objectLayout']/text()" /></xsl:if></xsl:attribute>
        <!-- Hier wird die Maske zur Pflege der Metadaten eingebunden, falls man sich im Editor befindet -->
        <xsl:if test="$wIsInEditor = '1'">
          <xsl:call-template name="templateEditor"/>
        </xsl:if>

        <div id="blockMain">
          <div id="blockMainInner">
                  
            <div id="blockTop">           
                       
              <!-- Logo -->
              <xsl:call-template name="logo" wd:pathTemplate="misc/includes.global.php#logo"/>  
                  
              <button id="printButton" onclick="window.print()"><xsl:value-of select="php:functionString('wTexts::getText', 'print')" /></button>                 
                          
            </div>
            
  
            <div id="blockContent"><xsl:if test="wd:extension/wd:object/@type = 'start'"><xsl:attribute name="id">blockContentStart</xsl:attribute></xsl:if>
              <div id="blockContentInner">   
                <!-- Inhaltegruppe 1 (content1) des Objektes (der Seite)-->                       
                <xsl:call-template name="content1"/>         
                <div class="clearBoth"> </div>
              </div>
            </div>                      
          </div>
          
          <div class="clearBoth"> </div>                                   
          <div id="blockBottom">
            <div id="blockBottomInner">
                <!-- Globale Inhalte unten-->
                <xsl:call-template name="content5Global" wd:pathTemplate="misc/includes.global.php#content5Global"/>
            </div>
          </div>             
        </div>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>

Beispiel: Inhalt der CSS-Datei /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/print.css

/*
////////////////////////////////////////////////////////////////
//
// Styles für die Druckansicht
//
////////////////////////////////////////////////////////////////
*/

/* Formatierung von HTML-Elementen */

html                   {height:auto}
body                   {color:#000000;margin:0;padding:0;font-family:Arial, Sans-serif, Helvetica;font-size:12px;background:none}

#logo                  {left:0;top:0}
#printButton           {position:absolute;right:0;margin:0}

/* Beim Ausdruck wird der Button nicht angezeigt */
@media print{
  #printButton         {display:none}
}

/* Grundgerüst */
#blockMain             {margin:0 auto;margin-top:20px;margin-bottom:20px;width:520px;padding:0;background:none}
#blockMainInner        {margin:0;padding:0;background:none}

#navigationMeta        {display:none}
#navigationFullLayer   {display:none}
#navigationFull        {display:none}
#navigationSubLayer    {display:none}
#navigationSub         {display:none}
#searchBox             {display:none}
#languageSelector      {display:none}
#blockBefore           {display:none}
#blockLeft             {display:none}
#blockRight            {display:none}

#blockContentStart     {width:520px;margin:20px 20px 0 0;background:none}
#blockContent          {width:520px;margin:20px 20px 0 0;background:none}
#blockContentInner     {margin:0}

#blockBottom           {width:520px}                       
#blockBottomInner      {margin:0;text-align:right}

.elementLink .back     {display:none}

Weitere Anpassungen nehmen Sie entsprechend vor. So können Sie auch die HTML-Struktur über das Ausgabetemplate komplett anpassen.

Weiterführende Links

CSS/Tutorials/Print-CSS
Ansicht für die Druckfunktion definieren