Benötigte CSS-/LESS-Einstellungen
Damit die PrintCSS-PIs mit Ihrem ConfigSetting korrekt umgesetzt werden, sind die im folgenden beschriebenen Einstellungen notwendig:
Anlegen der Less-Datei modul_pi.less
Wenn in Ihrem ConfigSetting noch keine Datei modul_pi.less existiert, müssen Sie sich diese anlegen. Dafür legen Sie sich am besten parallel zu Ihrem Haupt-Stylsheet (stylesheet.less) einen Ordner basis-module an. Im Ordner basis-module erstellen Sie eine neue Less-Datei mit dem Namen modul_pi.less und kopieren den unter modul_pi.less-Quellcode aufgeführten Code in die Less-Datei.
Aktualisierung der Less-Datei modul_pi.less
Entspricht der Aufbau Ihres ConfigSettings dem Aufbau unseres ConfigSettings, existiert neben dem Haupt-Stylsheet (stylesheet.less) ein Ordner basis-module. In diesem Ordner befindet sich die Datei modul_pi.less.
Wenn Sie die Datei öffnen, prüfen Sie bitte zunächst das Datum von @date. Sind die Datumsangaben in Ihrer modul_pi.less-Datei mit der @date-Angabe unter modul_pi.less-Quellcode identisch, brauchen Sie Ihre modul_pi.less-Datei nicht aktualisieren. Sie haben den aktuellsten Stand der modul_pi.less-Datei in Ihrem ConfigSetting eingebunden.
Unterscheiden sich die Datumsangaben, aktualisieren Sie Ihren Quellcode bitte mit dem unter modul_pi.less-Quellcode aufgeführten Code. (Copy&Paste)
Einbindung der Less-Datei modul_pi.less in das Haupt-Stylesheet
Die Less-Datei modul_pi.less muss aus der Basis-Less-Datei stylesheet.less am Ende des Dokumentes referenziert werden. Der folgende Quellcode zeigt wie die Referenzierung erfolgen muss:
@charset "utf-8"; @namespace pa "http://www.pagina-online.de"; ... /* -------------------------------------------------- */ /* PIs */ /* -------------------------------------------------- */ @import "basis-module/modul_pi.less";
modul_pi.less-Quellcode
@charset "utf-8"; @namespace pa "http://www.pagina-online.de"; /* ----------------------------------------------------------------------- * * @project parsX - PrintCSS - CSS/LESS-Modul * * - PI-Modul - * * Dies ist ein CSS/LESS-Modul. In dieser CSS/LESS-Datei dürfen ausschließlich * Einstellungen zur Umbruchsteuerung (parsX-PI's) deklariert sein. * Zentrale CSS/LESS-Settings sind in der CSS/LESS-Datei stylesheet.css/less * zu definieren. * * @author Christin Sandmann-Götz, pagina GmbH * Franziska Borsch, pagina GmbH * * @copyright pagina GmbH, Tübingen * * @date 2021-01-12 * @last-edit cg * * ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- * WICHTIGER HINWEIS: * * Diese Datei enthält die LESS-Variable und LESS-Mixin: * - @leerzeile * * Die CSS-Anweisungen für diese Variabeln und Mixins müssen * in der aufrufenden LESS-Datei definiert sein! * ----------------------------------------------------------------------- */ pa { /* -------------------------------------------------- */ /* Element-Typ-Deklaration */ /* -------------------------------------------------- */ &|* { display: block; } &|pi-nz-, &|pi-tv { display: inline; } /* -------------------------------------------------- */ /* globale Einstellungen */ /* -------------------------------------------------- */ /* Vererbung von Auszeichnungen */ &|* { color: inherit; font-family: inherit; } /* -------------------------------------------------- */ /* Umbruchsteuerung */ /* -------------------------------------------------- */ /* neue Seite - Allgemein */ &|pi-ns, &|pi-nsr, &|pi-nsl { leerzeile + & + abs, u-zwischen + & + abs { text-indent: 0; } } /* neue Seite */ &|pi-ns { page-break-after: always; } /* neue rechte Seite */ &|pi-nsr { page-break-after: right; } /* neue linke Seite */ &|pi-nsl { page-break-after: left; } /* neue Spalte */ &|pi-nsp { column-break-after: always; } /* Zeilenwechsel */ /* pi <?parsx nz?> wird zum Element <br> transformiert */ /* Zeilenwechsel mit Trennstrich */ &|pi-nz- { &::before { content: '-'; } &::after { content: '\A'; display: block; } } /* Trennfuge */ /* pi <?parsx tf?> wird zum Entity ­ (­) transformiert */ /* Trennverbot */ &|pi-tv { hyphens: none; } /* Leerzeile */ /* pi <?parsx lz?> wird zum Element <leerzeile> transformiert */ /* halbe Leerzeile */ &|pi-lzh { margin-bottom: (@leerzeile / 2); } } /* [#12025] Customer Hurenkinder-Einstellungen darf für <?printcss nz?> NICHT greifen */ pa { &|pi-nz { /* Hurenkinder */ widows: 1 !important; } } /* "Zeilenwechsel, der austreibt" (pa|pi-nza) und "Zeilenwechsel, der austreibt mit Trennstrich" (pa|pi-nza-) */ [element-before-pi-nza='ja'] { /* letzte Zeile im Blocksatz, damit das Zeilenende bündig zur Satzspieglkante ist */ text-align-last: justify !important; /* Vermeidung des Zeilenaustriebes auf die Anmerkungselemente <fussnote />, <endnote />, <marginalie /> */ & fussnote, & endnote, & marginalie { &, & * { text-align-last: left; } } /* Zeilenwechsel, der austreibt mit Trennstrich (pa|pi-nza-) */ &[trennstrich='true'] { // Einbringen des "Trennstriches" &::after { content: '-'; } } /* [#12025] Customer Hurenkinder-Einstellungen dürfen für <?printcss nza-?>, <?printcss nza?> NICHT greifen */ // Hurenkinder widows: 1 !important; /* [#20825] PIs in allen parsX 3-Blockelmenten zulassen >> Reset von Abständen, damit "nur" ein Zeilenumbruch ohne Abstände danach generiert wird */ margin-bottom: 0; padding-bottom: 0; } [element-after-pi-nza='ja'] { /* [#12025] Customer Schusterjungen-Einstellungen dürfen für generiertes Element nach <?printcss nza-?>, <?printcss nza?> NICHT greifen */ // Schusterjungen orphans: 1 !important; /* [#20825] PIs in allen parsX 3-Blockelmenten zulassen >> Reset von Abständen, damit "nur" ein Zeilenumbruch ohne Abstände davor generiert wird */ margin-top: 0; padding-top: 0; /* Kein Einzug der umbrechenden Zeile */ text-indent: 0 !important; } /* -------------------------------------------------- */ /* Schriftlaufweite [#8730] [#4947] */ /* Wortabstand [#9491] */ /* -------------------------------------------------- */ // Berechnung von Schriftlaufweite (quelle: http://www.web-publisher.info/20100917_letter-spacing-kerning-laufweite-spationierung/) // 1 Geviert = 1em @paPi-geviert: 1em; // In InDesign® wird die Schriftlaufweite sowie das manuelle Kerning in 1/1000 Geviert gemessen, einer Maßeinheit relativ zum aktuellen Schriftgrad. (quelle: https://www.typolexikon.de/schriftlaufweite/) // Übersicht Geviertwerte bei Schriftlaufweiten (DTP, basis InDesign®) // Extrem eng -100/1000 Geviert // -075/1000 Geviert // Sehr eng -050/1000 Geviert // -020/1000 Geviert // Eng -010/1000 Geviert // -005/1000 Geviert // Normalsschriftweite (NSW) Laufweite 0 (LW 0) // +005/1000 Geviert // Weit +010/1000 Geviert // +025/1000 Geviert // Sehr weit +050/1000 Geviert // +075/1000 Geviert // Extrem weit +100/1000 Geviert // Ultra weit +200/1000 Geviert /* Schriftlaufweite normal (Normalsschriftweite)*/ [pa|pi-lw="lw0"], [pa|pi-lw="nsw"] { letter-spacing: normal; } /* Schriftlaufweite vergrößern (Spationieren) */ // Zahlwerte .generateSchriftlaufweiteVergroessern(200); .generateSchriftlaufweiteVergroessern(@n, @i: 5) when (@i =< @n) { [pa|pi-lw="lw+@{i}"] { letter-spacing: (@i / (1000 * @paPi-geviert)); } .generateSchriftlaufweiteVergroessern(@n, (@i + 5)); } // Wortwerte .SchriftlaufweiteVergroessern(@i) { letter-spacing: (@i / (1000 * @paPi-geviert)); } [pa|pi-lw="weit"] { .SchriftlaufweiteVergroessern(10); } [pa|pi-lw="sehr-weit"] { .SchriftlaufweiteVergroessern(50); } [pa|pi-lw="extrem-weit"] { .SchriftlaufweiteVergroessern(100); } [pa|pi-lw="ultra-weit"] { .SchriftlaufweiteVergroessern(200); } /* Schriftlaufweite verkleinern (Unterschneiden) */ // Zahlwerte .generateSchriftlaufweiteVerkleinern(200); .generateSchriftlaufweiteVerkleinern(@n, @i: 5) when (@i =< @n) { [pa|pi-lw="lw-@{i}"] { letter-spacing: -(@i / (1000 * @paPi-geviert)); } .generateSchriftlaufweiteVerkleinern(@n, (@i + 5)); } // Wortwerte .SchriftlaufweiteVerkleinern(@i) { letter-spacing: -(@i / (1000 * @paPi-geviert)); } [pa|pi-lw="eng"] { .SchriftlaufweiteVerkleinern(10); } [pa|pi-lw="sehr-eng"] { .SchriftlaufweiteVerkleinern(50); } [pa|pi-lw="extrem-eng"] { .SchriftlaufweiteVerkleinern(100); } /* Wortabstand normal */ [pa|pi-wa="wa0"] { word-spacing: normal; } /* Wortabstand vergrößern */ .generateWortabstandVergroessern(500); .generateWortabstandVergroessern(@n, @i: 10) when (@i =< @n) { [pa|pi-wa="wa+@{i}"] { word-spacing: (@i / (1000 * @paPi-geviert)); } .generateWortabstandVergroessern(@n, (@i + 10)); } .WortabstandVergroessern(@i) { word-spacing: (@i / (1000 * @paPi-geviert)); } /* Wortabstand verkleinern */ .generateWortabstandVerkleinern(500); .generateWortabstandVerkleinern(@n, @i: 10) when (@i =< @n) { [pa|pi-wa="wa-@{i}"] { word-spacing: -(@i / (1000 * @paPi-geviert)); } .generateWortabstandVerkleinern(@n, (@i + 10)); } .WortabstandVerkleinern(@i) { word-spacing: -(@i / (1000 * @paPi-geviert)); } /* -------------------------------------------------- */ /* Uebersatz [#8729] [#4947] */ /* -------------------------------------------------- */ [pa|pi-ue="true"] { position: absolute; } /* ----------------------------------------------------------------------- * ENDE PI-Modul * ----------------------------------------------------------------------- */
