Farbe kehrt dorthin zurück, wo sie eine Aussage trägt
Die schwarzweiße Fassung nahm der Synopse mehr, als sie ihr gab: Rot und Grün
sind am Bildschirm die schnellste Scheidung von Streichung und Einfügung, und die
Balken der Hinweiskästen finden das Auge, bevor es liest. Beides kehrt zurück.
Schwarzweiß bleibt das Grundgerüst — Schrift, Rahmen, Knopf, Verweise —, sodass
Farbe nurmehr dort auftritt, wo sie etwas bedeutet, und überall dasselbe meint:
Rot warnt, Grün bestätigt.
Was bleibt, ist die Erkenntnis aus der farblosen Fassung. Sie hat gezeigt, dass
die Farbe im Diff nicht bloß schmückte, sondern allein trug: Die Einfügung hob
die ihr vom Browser zugedachte Unterstreichung ausdrücklich auf, sodass der grüne
Grund ihr einziges Merkmal war. Die Unterstreichung bleibt daher wiederher-
gestellt und tritt nun neben das Grün, wie die Durchstreichung neben dem Rot
steht. Wer schwarzweiß ausdruckt oder Farben anders wahrnimmt, sieht die Änderung
seither auch dann.
Die Hinweiskästen der Startseite erhalten Balken nach derselben Regel: rot für
den noscript-Hinweis und die Fehlermeldung, grün für die Fertigmeldung, grau
während der Arbeit, weil noch nichts feststeht. Die Abzeichen behalten ihre
Farben, bleiben aber in Versalien gesetzt. Für den Druck werden die farbigen
Flächen von der Sparschaltung der Browser ausgenommen.
Dreihundertzwölf Testfälle bestehen unverändert; die Synopse des Gebäude-
energiegesetzes ergibt weiterhin achtundsechzig angewandte Befehle, einund-
fünfzig zur manuellen Prüfung und siebenundvierzig geänderte Normen. Seiten und
Synopse sind in Hell- und Dunkelfassung in Augenschein genommen worden.
Artikel 7 des Verzeichnisses der Fassungen wird auf den nunmehr geltenden Stand
gebracht; er beschrieb die farblose Zwischenfassung.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Change-Id: Ie61c3f4d885547e16572655cb554695d72a14b17
diff --git a/FASSUNGEN.txt b/FASSUNGEN.txt
index 6803806..55b3fc1 100644
--- a/FASSUNGEN.txt
+++ b/FASSUNGEN.txt
@@ -40,9 +40,12 @@
Zwischenschritt von Hand.
Endlich wird das Erscheinungsbild demjenigen angeglichen, was das Erzeugnis
-darstellt: Es tritt fortan schwarzweiß auf wie ein Gesetzblatt. Dabei hat sich
-ergeben, dass die Farbe in der Synopse nicht bloß schmückte, sondern trug; ihre
-Abschaffung hat deshalb einen Mangel der Auszeichnung offengelegt und behoben.
+darstellt: Es tritt fortan schwarzweiß auf wie ein Gesetzblatt. Farbe verbleibt,
+wo sie eine Aussage trägt — im Diff und an den Balken der Hinweiskästen —, und
+bedeutet dort überall dasselbe. Bei der Erprobung einer gänzlich farblosen
+Fassung hat sich ergeben, dass die Farbe im Diff nicht bloß schmückte, sondern
+allein trug; das hat einen Mangel der Auszeichnung offengelegt, der nunmehr auch
+neben der wiederhergestellten Farbe behoben bleibt.
Artikel 1
@@ -188,9 +191,9 @@
Artikel 7
-Gestaltung in Schwarzweiß
+Gestaltung
-(1) Das Stilblatt der Seiten (style.css) wird auf reine Graustufen umgestellt. Die
+(1) Das Stilblatt der Seiten (style.css) wird auf Schwarzweiß umgestellt. Die
bisherige Schmuckfarbe — ein warmes Braun — entfällt ersatzlos; an ihre Stelle
tritt die Textfarbe. Die Abrundung der Kästen, Felder und Knöpfe entfällt
gleichfalls; gedrucktes Papier trägt keine runden Ecken.
@@ -200,32 +203,33 @@
Schrift um; die bisherige Aufhellung wäre an einem schwarzen Knopf ohne
Wirkung geblieben.
-(3) Die beiden allein stehenden Rotwerte entfallen. Die drei Zustände der Meldung
- unterscheiden sich nunmehr durch matten Text (Arbeit), kräftigen Rahmen
- (Fertigstellung) und doppelt starken Rahmen nebst Fettung (Fehler); der
- Hinweis bei abgeschaltetem JavaScript trägt denselben starken Rahmen. Die
- Beschriftungen bleiben, wie sie waren, und benennen den Zustand ohnehin.
+(3) Farbe verbleibt allein dort, wo sie eine Aussage trägt, und bedeutet überall
+ dasselbe: Rot warnt, Grün bestätigt. Die Hinweiskästen erhalten dazu einen
+ Balken am linken Rand — der Hinweis bei abgeschaltetem JavaScript und die
+ Fehlermeldung einen roten, die Fertigmeldung einen grünen, die Meldung
+ während der Arbeit einen grauen, weil noch nichts feststeht. Die
+ Beschriftungen bleiben, wie sie waren, und benennen den Zustand ohnehin; der
+ Balken hebt den Kasten hervor, er trägt nicht allein.
-(4) Das eingebettete Stilblatt der Synopse (HtmlRenderer) wird ebenso umgestellt.
- Streichung und Einfügung werden nicht mehr durch Rot und Grün geschieden,
- sondern durch Durchstreichung und Unterstreichung, jeweils auf gemeinsamer
- Hinterlegung, sowie durch die Spalte, in der sie stehen.
+(4) Das eingebettete Stilblatt der Synopse (HtmlRenderer) behält die Scheidung von
+ Streichung und Einfügung nach Rot und Grün; sie ist am Bildschirm die
+ schnellste. Zu ihr tritt jedoch die Form — durchgestrichen gegen
+ unterstrichen —, dazu die Spalte, in der die Marke steht.
-(5) Dabei wird ein Mangel behoben: Die Einfügung hob die ihr vom Browser
+(5) Damit wird ein Mangel behoben: Die Einfügung hob die ihr vom Browser
zugedachte Unterstreichung bisher ausdrücklich auf. Damit war der grüne Grund
das einzige Merkmal, an dem sie zu erkennen war; wer Farben nicht oder anders
wahrnimmt oder die Synopse schwarzweiß ausdruckte, sah eine Einfügung
überhaupt nicht. Die Unterstreichung wird wiederhergestellt.
-(6) Die Abzeichen an den Normköpfen werden gleichfalls durch die Form geschieden:
- „neu“ gefüllt, „aufgehoben“ gerahmt und durchgestrichen, „geändert“ schlicht
- gerahmt, sämtlich in Versalien mit Sperrung. Sie sind ohnehin beschriftet; die
- Farbe war dort von jeher bloße Verdopplung.
+(6) Die Abzeichen an den Normköpfen behalten ihre Farben nach derselben Regel,
+ werden aber in Versalien mit Sperrung gesetzt. Sie sind ohnehin beschriftet;
+ die Farbe bestätigt dort nur, was dasteht.
(7) Dem Körper der Synopse werden Schrift- und Grundfarbe ausdrücklich zugewiesen.
Der klebende Spaltenkopf übernahm seinen Grund bisher durch Vererbung und
- hatte mithin keinen verlässlichen. Für den Druck wird die Hinterlegung
- festgelegt, damit sie nicht fortfällt.
+ hatte mithin keinen verlässlichen. Für den Druck werden die farbigen Flächen
+ von der Sparschaltung der Browser ausgenommen, damit sie nicht fortfallen.
(8) Das Tabellenzeichen (favicon.svg) wird nachgezogen. Es führt die Werte
ausgeschrieben, weil ein Tabellenzeichen keine Stilblattgrößen erbt.
@@ -253,7 +257,7 @@
Synopse des Gebäudeenergiegesetzes (achtundsechzig angewandte Befehle,
einundfünfzig zur manuellen Prüfung, siebenundvierzig geänderte Normen, mithin
dasselbe wie zuvor). Streichung, Einfügung und die drei Abzeichen sind dabei
-ohne Farbe auseinanderzuhalten.
+auch dann auseinanderzuhalten, wenn man von ihren Farben absieht.
════════════════════════════════════════════════════════════════════════════════
diff --git a/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java b/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java
index 84446c1..69ec7aa 100644
--- a/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java
+++ b/src/main/java/eu/mulk/aendggner/synopse/HtmlRenderer.java
@@ -206,16 +206,20 @@
private static final String CSS =
"""
- /* Schwarz auf Papier wie ein Gesetzblatt. Streichung und Einfügung unterscheiden
- sich deshalb nicht durch Farbe, sondern durch Form: durchgestrichen gegen
- unterstrichen, dazu die Spalte, in der sie stehen. */
+ /* Grundgerüst schwarzweiß wie ein Gesetzblatt; Farbe trägt allein die Änderung:
+ rot heißt weg, grün heißt hinzu. Damit die Aussage auch im Schwarzweiß-Ausdruck
+ und bei Farbfehlsichtigkeit erhalten bleibt, tritt zur Farbe stets die Form —
+ durchgestrichen gegen unterstrichen — sowie die Spalte, in der sie steht. */
:root {
color-scheme: light dark;
--fg: #111;
--bg: #fff;
--rand: #bbb;
--dezent: #595959;
- --hinterlegung: #ececec;
+ --del-bg: #ffd7d7;
+ --del-fg: #8b0000;
+ --ins-bg: #d7f5d7;
+ --ins-fg: #005f00;
}
@media (prefers-color-scheme: dark) {
:root {
@@ -223,7 +227,10 @@
--bg: #141414;
--rand: #4a4a4a;
--dezent: #a0a0a0;
- --hinterlegung: #333;
+ --del-bg: #5a1f1f;
+ --del-fg: #ffb3b3;
+ --ins-bg: #1f4a1f;
+ --ins-fg: #b3ffb3;
}
}
body {
@@ -240,7 +247,7 @@
.quelle, .statistik, .gliederung, .ursachen { color: var(--dezent); font-size: 0.9rem; }
.entwurfshinweis {
border: 1px solid var(--rand);
- border-left: 4px solid var(--fg);
+ border-left: 4px solid var(--del-fg);
padding: 0.5rem 0.75rem;
margin: 0.6rem 0;
font-size: 0.95rem;
@@ -270,41 +277,43 @@
font-size: 0.95rem;
}
del, .alt del {
- background: var(--hinterlegung);
- color: inherit;
+ background: var(--del-bg);
+ color: var(--del-fg);
text-decoration: line-through;
}
ins, .neu ins {
- background: var(--hinterlegung);
- color: inherit;
+ background: var(--ins-bg);
+ color: var(--ins-fg);
text-decoration: underline;
}
.leer { color: var(--dezent); font-style: italic; }
- /* Gerahmte Kästchen in Versalien; die drei Arten trennt die Form, nicht die Farbe.
- Beschriftet sind sie ohnehin. */
+ /* Kästchen in Versalien; die Farbe folgt derselben Regel wie im Diff. Beschriftet
+ sind sie ohnehin, sodass die Farbe hier nur bestätigt, was dasteht. */
.badge {
font-family: system-ui, sans-serif;
font-size: 0.7rem;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.06em;
- border: 1px solid var(--rand);
- color: var(--dezent);
+ border: 1px solid transparent;
padding: 0.1rem 0.55rem;
vertical-align: middle;
}
- .neu-badge { background: var(--fg); color: var(--bg); border-color: var(--fg); }
- .aufgehoben-badge { text-decoration: line-through; }
- /* .geaendert-badge trägt bereits den schlichten Rahmen aus .badge. */
+ .neu-badge { background: var(--ins-bg); color: var(--ins-fg); }
+ .aufgehoben-badge { background: var(--del-bg); color: var(--del-fg); }
+ .geaendert-badge { border-color: var(--rand); color: var(--dezent); }
section.manuell { margin-top: 2rem; }
section.manuell li { margin-bottom: 0.7rem; }
.originaltext { color: var(--dezent); font-size: 0.85rem; }
@media print {
.vergleich { break-inside: avoid; }
- /* Ohne diese Festlegung wirft der Druck die Hinterlegung weg; Durchstreichung
- und Unterstreichung überstehen ihn ohnehin. */
- :root { --hinterlegung: #e4e4e4; }
- del, ins, .neu-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+ /* Ohne diese Festlegung wirft der Druck die Hinterlegung weg. Durchstreichung
+ und Unterstreichung überstehen ihn ohnehin und tragen die Aussage auch dort,
+ wo schwarzweiß gedruckt wird. */
+ del, ins, .badge, .entwurfshinweis {
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ }
}
""";
}
diff --git a/src/main/resources/eu/mulk/aendggner/web/style.css b/src/main/resources/eu/mulk/aendggner/web/style.css
index d770551..c872cbe 100644
--- a/src/main/resources/eu/mulk/aendggner/web/style.css
+++ b/src/main/resources/eu/mulk/aendggner/web/style.css
@@ -1,10 +1,15 @@
-/* Schwarz auf Papier wie ein Gesetzblatt: keine Buntheit, nur Graustufen. */
+/* Schwarz auf Papier wie ein Gesetzblatt. Farbe tritt allein an den Balken der
+ Hinweiskästen auf und meint dort dasselbe wie in der Synopse: rot warnt, grün
+ bestätigt. Die Kästen bleiben auch ohne den Balken lesbar; er hebt sie hervor,
+ er trägt nicht allein. */
:root {
color-scheme: light dark;
--fg: #111;
--bg: #fff;
--muted: #595959;
--border: #bbb;
+ --warnung: #8b0000;
+ --bestaetigung: #005f00;
}
@media (prefers-color-scheme: dark) {
@@ -13,6 +18,8 @@
--bg: #141414;
--muted: #a0a0a0;
--border: #4a4a4a;
+ --warnung: #ffb3b3;
+ --bestaetigung: #b3ffb3;
}
}
@@ -114,11 +121,11 @@
color: var(--fg);
}
-/* Warnung ohne Rot: der doppelt starke Rahmen trägt das Gewicht. */
.noscript {
margin: 0 0 2rem;
padding: 1rem;
- border: 2px solid var(--fg);
+ border: 1px solid var(--border);
+ border-left: 4px solid var(--warnung);
font-size: 0.875rem;
}
@@ -184,12 +191,15 @@
font-size: 0.8125rem;
}
-/* Die drei Zustände unterscheiden sich ohne Farbe: matter Text, kräftiger Rahmen,
- doppelt starker Rahmen mit Fettung. */
+/* Der Balken links zeigt den Zustand an; der Text benennt ihn ohnehin, sodass die
+ Meldung auch ohne Farbe verständlich bleibt. Während der Arbeit steht kein Balken,
+ weil noch nichts feststeht. */
.meldung {
margin-top: 1.25rem;
padding: 0.75rem 1rem;
border: 1px solid var(--border);
+ border-left-width: 4px;
+ border-left-color: var(--border);
font-size: 0.9375rem;
}
@@ -198,11 +208,11 @@
}
.meldung.fertig {
- border-color: var(--fg);
+ border-left-color: var(--bestaetigung);
}
.meldung.fehler {
- border: 2px solid var(--fg);
+ border-left-color: var(--warnung);
font-weight: bold;
}