Seitenformat A6

[Dina]

Moin Leute!

Ich bin gerade fertig mit meiner Seite und habe nun den Befehl bekommen, das Printmodell in A6 auszugeben (vorher A4). Ich dachte, wenn ich bei @page von A4 auf A6 umstelle, geht das, aber denkste. Er verkleinert die Seiten, aber die Schriften bleiben unverändert groß.
Wie schaffe ich das, dass der ganze Text flexibel gestaltet werden kann?
Ist es möglich mitten im Hochformattext auf Querformat umzustellen (das wird danach die nächste Aufgabe sein) und dann wieder auf Hochformat?

Hier noch mal mein CSS:

  
  
#ekblogo,  
#portal-globalnav,  
#portal-personaltools,  
#portal-column-one,  
#portal-column-two,  
#portal-breadcrumbs,  
#portal-footer,  
#kss-spinner,  
#banner,  
#sea-mandant,  
#logo-right,  
.contentViews,  
.contentActions,  
.hiddenStructure,  
.documentByLine,  
.documentActions,  
.portletWrapper{  
    display: none;  
}  
  
@page  
{  
 size: A4;  
 margin: 20mm 20mm 20mm 20mm;  
  
 @top-left {  
  font-family: Verdana, Lucida, sans-serif;  
  font-size: 10pt;  
 }  
 @top {  
  content: string(doctitle);  
  font-family: Verdana, Lucida, sans-serif;  
  font-size: 10pt;  
  border-bottom: 1px solid black;  
  margin-bottom: 20px;  
 }  
 @top-right {  
  content: string(mand);  
  font-family: Verdana, Lucida, sans-serif;  
  font-size: 10pt;  
 }  
 @bottom {  
  font-family: Verdana, Lucida, sans-serif;  
  font-size: 10pt;  
  content: counter(page);  
 }  
}  
  
@page:first {  /*erste Seite mit dem Deckblatt soll normal sein*/  
 @top {  
  content: normal;  
 }  
 @bottom {  
  content: normal;  
 }  
}  
  
body  
{  
 background-color: #ffffff;  
 font-family: Verdana, Lucida, sans-serif;  
 counter-reset: Ebene01;  
}  
  
#inhalt a::after {  
 content: leader(' ') target-counter(attr(href), page);  
}  
  
.documentFirstHeading {  
 text-align: center;  
 font-size: 25pt;  
}  
  
/*Liste wird nach links gesetzt, der besseren lesbarkeit wegen*/  
ol.arabic1 {  
 margin-left: 16px;  
 counter-reset: arabic2;  
    list-style-type:none;  
}  
  
/*Listenpunkte werden generiert*/  
ol.arabic1 li:before {  /*1. Ebene der Liste*/  
    content: counter(arabic1) " ";  
 counter-increment: arabic1;  
}  
  
/*Quelle: http://www.luk-korbmacher.de/Schule/Text/din5008_12.htm*/  
ol.arabic2{  
 margin-left: 42px;  
 margin-bottom: 15px; /*sorgt für Abstand nach den großen Überschriften*/  
 counter-reset: arabic2;  
    list-style-type:none;  
}  
  
ol.arabic2 li:before {  /*2. Ebene der Liste*/  
    content: counter(arabic1) "." counter(arabic2) " ";  
 counter-increment: arabic2;  
}  
  
ol.arabic3 {  
 margin-left: 61px;  
 counter-reset: arabic3;  
 list-style-type: none;  
}  
  
ol.arabic3 li:before {  /*3. Ebene der Liste*/  
 content: counter(arabic1) "." counter(arabic2) "." counter(arabic3) " ";  
 counter-increment: arabic3;  
}  
  
ol.arabic4 {  
 margin-left: 77px;  
 counter-reset: arabic4;  
 list-style-type: none;  
}  
  
ol.arabic4 li:before {    /*4. Ebene der Liste*/  
 content: counter(arabic1) "." counter(arabic2) "." counter(arabic3) "." counter(arabic4) " ";  
 counter-increment: arabic4;  
}  
  
/*Dokumentenüberschriften werden festgelegt*/  
h3, h2 {  
 string-set: doctitle content();  
 page-break-before: always;  
 font-size: 18pt;  
}  
  
/*Überschriften bekommen Nummern zugewiesen! Darauf achten, dass alle, die keine Nummer haben sollen mit <h2> definiert sind*/  
h3:before {  
content: counter(Ebene01) " ";  
counter-increment: Ebene01;  
}  
  
h3 {  
 counter-reset: Ebene02;  
}  
  
h4 {  
 font-size: 16pt;  
 counter-reset: Ebene03;  
}  
  
h4:before {  
content: counter(Ebene01) "." counter(Ebene02) " ";  
counter-increment: Ebene02;  
}  
  
h5 {  
 font-size: 14pt;  
 counter-reset: Ebene04;  
}  
  
h5:before {  
 content: counter(Ebene01) "." counter(Ebene02) "." counter(Ebene03) " ";  
 counter-increment: Ebene03;  
}  
  
h6 {  
 font-size: 12pt;  
}  
  
h6:before {  
 content: counter(Ebene01) "." counter(Ebene02) "." counter(Ebene03) "." counter(Ebene04) " ";  
 counter-increment: Ebene04;  
}  
  
table {  
 border-collapse: collapse;  
 margin-top: 20px;  
}  
  
.field,  
.field-body  {  
 border: 1px solid black;  
}  
  
.field-name {  
 text-align: left;  
 vertical-align: top;  
 padding-top: 15px;  
}  
  
.field-body {  
 padding: 0px 15px 0px 20px;  
 page-break-inside: avoid;  
 text-align: left;  
}  
  
.field-body p {  
 padding-left: 38px;  
}  
  
.field-body ul {  
 padding-top: 15px;  
 padding-bottom: 15px;  
}  
  
.field-body img {  
 height: auto;  
 padding-top: 10px;  
}  
  
th {  
 padding: 0px 10px 0px 10px;  
 background-color: #F5F5F5;  
}  
  
a {  
 color: black;  
 text-decoration: none;  
}  
  
li {  
 margin-left: -15px;  
}  
  
dt {  
 margin-bottom: 5px;  
 font-size: 12pt;  
}  
  
dd {  
 margin-left: 0px;  
}  
  
.danger > .first {  
 display: none;  
}  
  
.danger > .last {  
 font-weight: bold;  
 color: red;  
}  
  
.label {  
 padding-right: 15px;  
}

Entschuldigung, wenn es so viel ist, aber ich weiß nicht, was für die Änderung bedeutend ist.

Danke für eure Mühe!

Gruß Dina

[Harlequin]

Yerf!

Ich dachte, wenn ich bei @page von A4 auf A6 umstelle, geht das, aber denkste. Er verkleinert die Seiten, aber die Schriften bleiben unverändert groß.

Wieso auch? 10pt sind unabhängig von der Seitengröße immer gleich groß.

Wie schaffe ich das, dass der ganze Text flexibel gestaltet werden kann?

Gib alle Schriftgrößen in "em" an. Dann kannst du über eine Default-Angabe im <body> alle Schriftgrößen auf einmal anpassen.

Ist es möglich mitten im Hochformattext auf Querformat umzustellen (das wird danach die nächste Aufgabe sein) und dann wieder auf Hochformat?

<http://de.selfhtml.org/css/eigenschaften/printlayouts.htm#benannte@title=Prinzipiell ja.> Mit der Browserunterstützung siehts leider düster aus.

Gruß,

Harlequin

[Dina]

Gib alle Schriftgrößen in "em" an. Dann kannst du über eine Default-Angabe im <body> alle Schriftgrößen auf einmal anpassen.

Blöde Frage jetzt, aber was müsste ich denn schreiben?
Hab gerade in selfhtml ein bisschen geschaut und im Web auch, aber da steht nichts wegen dem anpassen der Schriftgrößen.

[Dina]

Das Problem ist, dass der Body richtig angezeigt wird (hab einfach ein border drum gezogen), aber den Text juckt das überhaupt nicht. Er läuft einfach weiter über den Body hinaus.
Auch alle meine Tabellen und Listen sind so verunstaltet.
Ich habe schon die Schriftgröße des Bodys geändert, aber das ändert nichts daran, dass der Text trotzdem über den body läuft.
Wie kann ich das hinbekommen, dass der Text sich an den body orientiert?

Danke für alle Antworten.

LG Dina

[Dina]

HILLLLFFFFFFFFFFFEEEEEEEEEE!!!

Ich kann doch kein Doppelposting machen!

Will mir denn keiner Helfen? *schnief*

...

[Dina]

Ich habe mal eine Seite erstellt gehabt, die im A5-Format dargestellt wurde. Gebe ich hier eine Änderung in A6 oder A4 an, macht der Text genau das, was er soll.
Dann hab ich versucht, dieses Style Sheet zu übernehmen auf meine aktuelle Seite, aber das funktioniert nicht.

Kann vom Quelltext etwas kommen, das einen Umbruch verhindert?
Wieso orientiert sich der laufende Text nicht an der body-breite?

Ihr habt mein CSS ja drinne.

Hab ich etwas wichtiges übersehen?

Ich hoffe, es hilft mir auch bald mal jemand. Ich selber komm echt nicht mehr weiter!!!

Danke

[Harlequin]

Yerf!

Das Problem ist, dass der Body richtig angezeigt wird (hab einfach ein border drum gezogen), aber den Text juckt das überhaupt nicht. Er läuft einfach weiter über den Body hinaus.

Ah so, da hab ich dich glaub ich etwas falsch verstanden.

Normalerweise sollte aber der Text umbrechen, wenn die Seite zuende ist... (feste Breitenangaben hast du im CSS ja nicht drin)

Eine Ausnahme bilden da nur Tabellen, da diese ja schlecht umgebrochen werden können und ein gewisses Minimum an Breite pro Spalte bleibt meist erhalten. (notfalls muss man den Browser mittels table-layout:fixed dazu überreden die Tabelle nicht sebstständig an den inhalt anzupassen)

Gruß,

Harlequin

[Dina]

Eine Ausnahme bilden da nur Tabellen, da diese ja schlecht umgebrochen werden können und ein gewisses Minimum an Breite pro Spalte bleibt meist erhalten. (notfalls muss man den Browser mittels table-layout:fixed dazu überreden die Tabelle nicht sebstständig an den inhalt anzupassen)

Gilt das auch für Feldlisten?
Soll ich denen auch eine feste Breite zuweisen?

Danke für deine Hilfe

[Harlequin]

Yerf!

Gilt das auch für Feldlisten?

Normalerweise nicht. Ich kenn das eigentlich nur von <table> (und hab mich viel damit rumgeärgert als ich noch mit Tabellen "gelayoutet" hab).

Soll ich denen auch eine feste Breite zuweisen?

Es mal auszuprobieren kann sicher nicht schaden. Denn woran es liegt kann man vermutlich nur per Versuch und Irrtum herausfinden. (Außer es kommt noch ein Profi in Sachen Drucklayout mit *dem* entscheidenden Hinweis)

Gruß,

Harlequin

[Dina]

Ich habe jetzt einfach folgendes CSS verwendet:

  
  
#ekblogo,  
#portal-globalnav,  
#portal-personaltools,  
#portal-column-one,  
#portal-column-two,  
#portal-breadcrumbs,  
#portal-footer,  
#kss-spinner,  
#banner,  
#sea-mandant,  
#logo-right,  
.contentViews,  
.contentActions,  
.hiddenStructure,  
.documentByLine,  
.documentActions,  
.portletWrapper{  
    display: none;  
}  
  
@page  
{  
 size:  A5;  
 margin: 10mm 10mm 10mm 10mm;  
  
 @top-left {  
  font-family: Verdana, Lucida, sans-serif;  
  font-size: 10pt;  
 }  
 @top {  
  content: string(doctitle);  
  font-family: Verdana, Lucida, sans-serif;  
  font-size: 10pt;  
  border-bottom: 1px solid black;  
 }  
 @top-right {  
  content: string(mand);  
  font-family: Verdana, Lucida, sans-serif;  
  font-size: 10pt;  
 }  
 @bottom {  
  font-family: Verdana, Lucida, sans-serif;  
  font-size: 10pt;  
  content: counter(page);  
 }  
}  
  
@page:first {  
 @top {  
  content: normal;  
 }  
 @bottom {  
  content: normal;  
 }  
}  
  
body  
{  
 background-color: #ffffff;  
 font-family: Verdana, Lucida, sans-serif;  
 counter-reset: Ebene01;  
 font-size: 0.7em;  
}  
  
.documentFirstHeading {  
 font-size: xx-large !important;  
 text-align: center;  
}  
  
.arabic a::after {  
 content: leader(' ') target-counter(attr(href), page);  
}  
  
  
ol.arabic {  
 margin-left: 1.6em;  
 counter-reset: arabic2;  
    list-style-type:none;  
}  
  
  
ol.arabic li:before {  
    content: counter(arabic1) " ";  
 counter-increment: arabic1;  
}  
  
  
ol.arabic li ol.arabic{  
 margin-left: 3em;  
 margin-bottom: 1em;  
 counter-reset: arabic2;  
    list-style-type:none;  
}  
  
ol.arabic li ol.arabic li:before {  
    content: counter(arabic1) "." counter(arabic2) " ";  
 counter-increment: arabic2;  
}  
  
ol.arabic li ol.arabic li ol.arabic {  
 margin-left: 4.4em;  
 counter-reset: arabic3;  
 list-style-type: none;  
}  
  
ol.arabic li ol.arabic li ol.arabic li:before {  
 content: counter(arabic1) "." counter(arabic2) "." counter(arabic3) " ";  
 counter-increment: arabic3;  
}  
  
ol.arabic li ol.arabic li ol.arabic li ol.arabic li:before {  
 content: counter(arabic1) "." counter(arabic2) "." counter(arabic3) "." counter(arabic4) " ";  
 counter-increment: arabic4;  
}  
  
ol.arabic li ol.arabic li ol.arabic li ol.arabic {  
 margin-left: 5.3em;  
 counter-reset: arabic4;  
 list-style-type: none;  
}  
  
  
h2, h3 {  
 string-set: doctitle content();  
 page-break-before: always;  
 font-size: 1.3em;  
}  
  
  
h3:before {  
 content: counter(Ebene01) " ";  
 counter-increment: Ebene01;  
}  
  
h3 {  
 counter-reset: Ebene02;  
}  
  
h4 {  
 font-size: 1.1em;  
 counter-reset: Ebene03;  
}  
  
h4:before {  
 content: counter(Ebene01) "." counter(Ebene02) " ";  
 counter-increment: Ebene02;  
}  
  
h5 {  
 font-size: 1em;  
 counter-reset: Ebene04;  
}  
  
h5:before {  
 content: counter(Ebene01) "." counter(Ebene02) "." counter(Ebene03) " ";  
 counter-increment: Ebene03;  
}  
  
h6 {  
 font-size: 0.8em;  
}  
  
h6:before {  
 content: counter(Ebene01) "." counter(Ebene02) "." counter(Ebene03) "." counter(Ebene04) " ";  
 counter-increment: Ebene04;  
}  
  
.field,  
.field-body  {  
 border: 1px solid black;  
}  
  
.field-body {  
 padding: 0em 0.7em 0em 1em;  
 page-break-inside: avoid;  
 text-align: left;  
}  
  
#flaeche img, #tiefe img {  
 width: 45%;  
 height: auto;  
 padding-top: 0.8em;  
}  
  
.field-name {  
 text-align: left;  
 vertical-align: top;  
 padding-top: 1em;  
}  
  
.field-body p {  
 padding-left: 2em;  
}  
  
.field-body ul {  
 padding-top: 1em;  
 padding-bottom: 1em;  
}  
  
.field-body img {  
 height: auto;  
 padding-top: 0.8em;  
}  
  
table.docutils  
{  
 width: 100%;  
 layout: fixed;  
 border-spacing: 2px;  
 border-collapse: collapse;  
 margin-bottom: 2em;  
}  
  
.docutils dt {  
 font-size: smaller;  
}  
  
table.docutils th  
{  
 background: lightgrey;  
 color: black;  
 font-weight: normal;  
}  
  
table.docutils td,  
table.docutils th  
{  
 padding: 0em;  
}  
  
a {  
 color: Black !important;  
 padding: 0 !important;  
 text-decoration: none !important;  
}  
  
.danger > .first {  
 display: none;  
}  
  
.danger > .last {  
 font-weight: bold;  
 color: red;  
}  
  
p {  
 font-size: 1em;  
 line-height: 1.2em;  
}  
  
li {  
 margin-left: -1em;  
}  
  
dt {  
 margin-bottom: 0.4em;  
 font-size: 1em;  
}  
  
dd {  
 margin-left: 0em;  
 text-indent: 1em;  
}  
  
dd > ul {  
 text-indent: 0em;  
}  
  
  
  
.label {  
 padding-right: 1em;  
}  
  
.fluffy td {  
 text-align: center;  
 padding: 0.5em;  
 page-break-inside: avoid;  
}

Ab table.docutils ist der hautsächlich neue Text für die Tabellenformatierung eingefügt. Dieses funktioniert (mit ein paar kleinen Schönheitsfehlern) wunderbar im A5 Format. Schalte ich jetzt aber auf A6 um, dann ist der Text wieder länger, als der body.

Ich verstehe die Änderung nicht, die table.docutils hervorgerufen hat und wie ich es formal so umbauen kann, dass es für alle  Seitenformate gilt.

Normalerweise müsste das funktionieren, tut es aber leider nicht.

Ist wohl doch nicht so einfach zu lösen das Problem, oder?

[Harlequin]

Yerf!

table.docutils
{
width: 100%;
layout: fixed;

Das sollte table-layout:fixed; heißen.

border-spacing: 2px;
border-collapse: collapse;
margin-bottom: 2em;
}

Ab table.docutils ist der hautsächlich neue Text für die Tabellenformatierung eingefügt. Dieses funktioniert (mit ein paar kleinen Schönheitsfehlern) wunderbar im A5 Format. Schalte ich jetzt aber auf A6 um, dann ist der Text wieder länger, als der body.

Vermutlich weil die Tabelleninhalte zu viel Platz brauchen (sind da lange Wörter drinnen die noch kleinere Spaltenbreiten verhindern?) Evtl. hilft auch mal mit den CSS-Angaben zum Zeilenumbruch zu spielen (da müssts etwas geben).

Ich verstehe die Änderung nicht, die table.docutils hervorgerufen hat und wie ich es formal so umbauen kann, dass es für alle  Seitenformate gilt.

An Tabellen kann man manchmal schon verzweifeln...

Ist wohl doch nicht so einfach zu lösen das Problem, oder?

Es ist vor allem auch schwierig ohne das Ergebnis live vor sich zu haben. Aber das wird wohl nicht so einfach möglich sein, du benutzt das ja nicht in einem Browser sondern einem PDF-Generator, oder?

Gruß,

Harlequin

[Dina]

Das sollte table-layout:fixed; heißen.

Glaubs oder glaubs nicht, aber genau das war der Fehler! Jetzt macht er den Text auch in A6 ordentlich.
Oh danke schön (*verbeug und anhimmel*)!!!!

Vermutlich weil die Tabelleninhalte zu viel Platz brauchen (sind da lange Wörter drinnen die noch kleinere Spaltenbreiten verhindern?) Evtl. hilft auch mal mit den CSS-Angaben zum Zeilenumbruch zu spielen (da müssts etwas geben).

Hast recht, jetzt stellt sich dieses Problem ein. Ich habe es schon mal mit Zeilenumbruch probiert, aber das hat das Programm ignoriert. Vielleicht mach ich einfach die Schrift um eine Winzigkeit kleiner.

An Tabellen kann man manchmal schon verzweifeln...

Oh wir recht du hast!!!

Es ist vor allem auch schwierig ohne das Ergebnis live vor sich zu haben. Aber das wird wohl nicht so einfach möglich sein, du benutzt das ja nicht in einem Browser sondern einem PDF-Generator, oder?

Jep, ich realisiere die Printdateien mit Prince. Ist am einfachsten (wenn sich nicht dauernd solche Fehler einschleichen würden).

Vielen Dank für die tollen Hinweise!!!

Ganz allerliebste Grüße

Dina

[Dina]

Eine Frage hätte ich doch noch:

Wie kann ich per CSS die automatische Silbentrennung einführen?

Ich weiß, dass so was funktioniert, nur habe ich bisher nicht verstanden, wie!

Danke für Antworten.

Dina

[Harlequin]

Yerf!

Wie kann ich per CSS die automatische Silbentrennung einführen?

Hm, eigentlich gar nicht, da Browser keine Wörterbücher dafür haben.

Ich weiß, dass so was funktioniert, nur habe ich bisher nicht verstanden, wie!

Wenn, dann müsste das ein Spezialfeature von Prince sein. (Als ich mir das mal kurz auf deren HP angeschaut hatte, hab ich gesehen, dass sie CSS für ihre Zwecke erweitert haben)

Gruß,

Harlequin

[Dina]

Danke dir trotzdem (*rückwärts entfernt*)!

LG

Dina