/* --------------------------------------------------------------------------- * E5 - Schriftketten, die CJK tragen. * * BEFUND. Der Bestand setzt genau eine Schriftkette: * Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, * "Segoe UI", sans-serif * Keines dieser Glieder enthaelt chinesische oder japanische Zeichen. Was * dann erscheint, entscheidet der Rueckfall des Browsers - unter WebView2 auf * Windows meist brauchbar, aber ungesteuert und auf anderen Rechnern anders. * * KEINE SCHRIFTDATEI WIRD MITGELIEFERT. Ausdrueckliche Vorgabe: das Spiel * soll keine lizenzpflichtigen Inhalte enthalten. Diese Datei liefert * deshalb NICHTS aus - sie NENNT nur Namen. Eine Schrift in einer * font-family-Liste zu nennen ist keine Weitergabe und loest keine * Lizenzpflicht aus; benutzt wird sie nur, wenn sie auf dem Rechner des * Spielers ohnehin installiert ist. Es gibt hier kein @font-face, keine * .woff2, keinen Verweis auf Google Fonts. * * Damit traegt die Kette ueberall dort, wo CJK-Schriften zum System * gehoeren: Windows (Microsoft YaHei, Yu Gothic), macOS (PingFang, * Hiragino), SteamOS und die verbreiteten Linux-Verteilungen (Noto CJK). * * Latein kommt weiter aus Inter, weil Inter VOR den CJK-Schriften steht; nur * Zeichen, die Inter nicht hat, fallen weiter durch. Auch Inter wird nicht * mitgeliefert - der Bestand nennt es schon heute nur. * * CHINESISCH UND JAPANISCH TEILEN ZEICHEN, aber nicht deren Form. Dieselbe * Han-Zeichenfolge sieht in einer japanischen Schrift anders aus als in einer * chinesischen, und beides ist fuer Leser der jeweils anderen Sprache falsch * bis stoerend. Eine einzige Kette kann das nicht leisten - deshalb schaltet * :lang() um. Dafuer muss mitgefuehrt werden; das erledigt * v0503-schrift.js. * ------------------------------------------------------------------------- */ :root { --pl-schrift-latein: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Vereinfachtes Chinesisch: Windows, macOS, Linux, dann Noto falls gebuendelt */ --pl-schrift-cjk: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei"; } /* Japanisch braucht japanische Formen - Kette komplett tauschen, nicht ergaenzen. */ :root:lang(ja) { --pl-schrift-cjk: "Yu Gothic UI", "Yu Gothic", "Hiragino Sans", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", "MS PGothic"; } /* Die eigentliche Kette: Latein zuerst, CJK als Durchfall. */ html, body, button, input, select, textarea, .pl42-body { font-family: var(--pl-schrift-latein), var(--pl-schrift-cjk); } /* CJK-Zeilenumbruch. Chinesisch und Japanisch kennen keine Wortzwischenraeume; * ohne diese Regel bricht der Browser eine lange Zeile gar nicht um und die * Flaeche laeuft seitlich aus. */ :root:lang(zh-Hans) body, :root:lang(ja) body { line-break: normal; word-break: normal; overflow-wrap: anywhere; } /* CJK-Zeichen sind quadratisch und stehen enger; die fuer Latein gesetzte * Sperrung in Grossbuchstaben-Etiketten wirkt dort wie ein Fehler. */ :root:lang(zh-Hans) [class*="label"], :root:lang(zh-Hans) .pl42-eyebrow, :root:lang(ja) [class*="label"], :root:lang(ja) .pl42-eyebrow { letter-spacing: 0; } /* V0.51.1: Die Auswahl oben traf nur [class*="label"] und .pl42-eyebrow und * ging damit an fast allen gesperrten Grossbuchstaben-Etiketten vorbei - die * pl42-Huelle, die Fenster, die Live-Partie und die Kennzeilen der neuen * Karrieretiefe benennen ihre Etiketten anders. Erfasst werden jetzt auch * diese Klassenfamilien; die Sperrung stammt aus der lateinischen Typografie * und wirkt in CJK wie ein Setzfehler. */ :root:lang(zh-Hans) .pl42-kicker, :root:lang(ja) .pl42-kicker, :root:lang(zh-Hans) .pl42-sub, :root:lang(ja) .pl42-sub, :root:lang(zh-Hans) .pl42-tag, :root:lang(ja) .pl42-tag, :root:lang(zh-Hans) .pl42-stat small, :root:lang(ja) .pl42-stat small, :root:lang(zh-Hans) .pl42-nav span, :root:lang(ja) .pl42-nav span, :root:lang(zh-Hans) .modal-head small, :root:lang(ja) .modal-head small, :root:lang(zh-Hans) [class*="kicker"], :root:lang(ja) [class*="kicker"], :root:lang(zh-Hans) [class*="eyebrow"], :root:lang(ja) [class*="eyebrow"], :root:lang(zh-Hans) [class*="-cap"], :root:lang(ja) [class*="-cap"] { letter-spacing: 0; } /* --------------------------------------------------------------------------- * PSEUDO-LOKALISIERUNG * * Die Sprache xx-PS traegt kuenstlich verlaengerten Text. * * HIER STAND EIN FEHLER, und er ist lehrreich: die erste Fassung schaltete * unter data-pl-pseudo overflow, white-space und text-overflow ab, damit die * Ueberlaeufe mit dem Auge zu sehen sind. Damit hat sie die MESSUNG zerstoert * - der Pruefer erkennt abgeschnittenen Text daran, dass scrollWidth groesser * als clientWidth ist, und das setzt voraus, dass overflow ueberhaupt noch * schneidet. Der Lauf meldete daraufhin WENIGER Ueberlaeufe unter Pseudo als * unter Deutsch, was unmoeglich ist. * * Regel daraus: ein Pruefstand darf den Gegenstand der Messung nicht * veraendern. Die Sichtbarmachung gehoert deshalb hinter einen ZWEITEN * Schalter, den der mechanische Lauf nicht setzt. * ------------------------------------------------------------------------- */ :root[data-pl-zeigen="1"] * { white-space: normal !important; text-overflow: clip !important; overflow: visible !important; } :root[data-pl-zeigen="1"] *:not(html):not(body) { outline: 1px solid rgba(255, 0, 0, 0.18); } /* --------------------------------------------------------------------------- * H8 - Dehnbare Beschriftungen * * Die Pseudo-Sprache hat vier echte Engstellen sichtbar gemacht: schrumpfende * Tab-Schalter, Kalenderkacheln, die Liste der kommenden Termine und * Mannschaftsnamen in Ergebniszeilen. Der Inhalt bleibt jetzt voll lesbar; * breite Tab-Leisten duerfen weiterhin horizontal scrollen. * ------------------------------------------------------------------------- */ .pl42-segment > button { flex: 0 0 auto; } .pl42-calgrid-event { align-items: flex-start; } .pl42-calgrid-event em, .pl42-upcoming-row > span b, .pl42-result-side b { display: block; min-width: 0; width: 100%; max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; line-height: 1.25; } .pl42-bracket-match div span:not(.pl42-badge) { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; line-height: 1.25; } /* Ergebniszeilen bekommen fuer Mannschaftsnamen eine volle erste Zeile und * legen die Leistungsangabe darunter. So bleiben beide Namen auch im * zweispaltigen Wettbewerbsbildschirm lesbar. */ .pl42-result-row--full { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; row-gap: 6px; } .pl42-result-row--full > time { grid-column: 1; grid-row: 1; } .pl42-result-row--full > .pl42-result-side:first-of-type { grid-column: 2; grid-row: 1; } .pl42-result-row--full > .pl42-result-score { grid-column: 3; grid-row: 1; } .pl42-result-row--full > .pl42-result-side:nth-of-type(2) { grid-column: 4; grid-row: 1; } .pl42-result-row--full > [class^="pl42-outcome--"] { grid-column: 5; grid-row: 1; } .pl42-result-row--full > .pl42-result-perf { grid-column: 2 / 5; grid-row: 2; text-align: left; } .pl42-result-row--full > .pl42-ico { grid-column: 5; grid-row: 2; }