Wir experimentieren mit der Verringerung der Textgröße und des Zeilenabstands sowie der Erhöhung der Höhe von Codeblöcken, um die Lesbarkeit größerer Codeblöcke zu verbessern. Dies ist hauptsächlich problematisch für große Codeblöcke, die 20 Zeilen oder mehr überschreiten. Das Ergebnis ist, dass mehr Code im normalen Ansichtsfenster sichtbar ist.
Vorher
Nachher
Die Änderung wurde hier vorgenommen:
Scheint es, als ob die Änderung der Schriftgröße von Inline-Code wie diesem wahrscheinlich ein unbeabsichtigter Nebeneffekt ist?
Ja, das war unbeabsichtigt, wir sollten es so ändern, dass nur vollständige Blöcke geändert werden und nicht Inline-Code.
FWIW, ich benutze das nur auf meiner Hackity-Hack-Dev-Instanz:
pre code {
font-size: var(--font-down-1);
}
Ergebnis
Ich habe einen PR gesendet, um Stiländerungen an Inline-Monospace-Text zu entfernen und auch die Zeilenhöhe in <pre>-Blöcken leicht zu erhöhen.
Dies beeinträchtigt leider die Lesbarkeit bei kürzeren Code-Snippets.
Z. B.:
Die Schriftart ist kleiner, die Zeilenhöhe kürzer.
Kann dies nur sehr lange Codeblöcke betreffen? Sollte dies eine Kernänderung sein @jordan.vidrine?
Ich möchte hier auch den Unterschied zwischen diesem Experiment und Stack Overflow hervorheben.
Aktuelles Experiment
Stack Overflow
Einige Dinge, die mir sofort auffallen, sind:
Ich muss mir hljs genauer ansehen und herausfinden, warum unser Anwendungsfall Titel fett formatiert.
Ich finde es toll, dass Sie sich Stack Overflow angesehen haben, denn wenn jemand herausgefunden hätte, wie man Codeblöcke anzeigt, dann wären sie es.
Eine weitere Beobachtung: Die Schriftgröße scheint sich nicht zu ändern, obwohl sie sich ändert… (15px → 13px, aber die Farben gleichen das teilweise aus)
Visueller Rhythmus und Zeilenhöhe fühlen sich hier viel besser an:
Stack Overflow
Aktuelles Experiment
Die Zeilenhöhe ist merklich ein Problem, und unser „Schrumpfen“ ging zu weit, da unsere Basisschrift größer und geräumiger ist als bei Stack Overflow.
Ich unterstütze die Entfettung in unserem aktuellen Experiment und die Erhöhung von Größe und Zeilenhöhe sehr.
Dieser PR hat folgende Änderungen vorgenommen: https://github.com/discourse-org/design-experiments/pull/77
Das sieht großartig aus, Jordan. In diesem Fall denke ich, dass die Verwendung des konsistenten Schriftgewichts die Lesbarkeit verbessert. Die erhöhte Polsterung gefällt mir auch.
Danke, dem stimme ich zu. Ich denke, ich möchte mir auch die Farben ansehen und warum hljs die Farben verwendet, die es verwendet. Ich habe dieses Farbmuster nirgendwo online gesehen.
Ich bin ein Fan der Typografie-Änderungen, aber ich finde den dunklen Hintergrund zu viel. Der hellere Hintergrund ist viel besser zu lesen.
Änderung eingehend.
Nach weiterer Recherche sehe ich, dass die von uns verwendeten Farben auf einem veralteten Schema basieren, das von Github vor möglicherweise 10 Jahren oder schon vor 4 Jahren verwendet wurde.
Gibt es hier Raum, die Standardfarben zu etwas Aktuellem zu ändern?
Github hat seitdem ein aktualisiertes Farbschema sowie andere Optionen für ein helles Standard-Schema.
Stack Overflow
Atom One Light
New Github
hljs default 
Meine persönliche Präferenz wäre etwas mit gedämpfteren Farben – in Ihren Beispielen ist Stack Overflow meine Wahl.
Nach ein paar Tagen muss ich bei der kleineren Schriftgröße immer noch ein wenig blinzeln, ich glaube nicht, dass es die Platzersparnis wert ist.
Fühlen Sie dasselbe auf Stack Overflow (zum Beispiel)? Die Schriftgrößen- und Zeilenhöhenberechnungen sind jetzt zwischen Discourse und SO gleich.
max-height bei Discourse ist mit 500px gegenüber 600px etwas geringer.
Der Kontrast ist in unserem Fall viel schlechter und macht einen großen Unterschied, wenn man versucht, kleinen Text zu lesen, zum Beispiel (Stack Overflow auf der rechten Seite):
Ja, ich verstehe, was Sie meinen.
Wie stehen Sie zu diesen Änderungen in dem von mir eingereichten PR: https://github.com/discourse-org/design-experiments/pull/79
Hier ist eine Option, bei der ich Schwarz zum Hintergrund im Dunkelmodus hinzufüge, anstatt etwas zu verwenden, das auf Sekundär- oder Primärfarben basiert. Ich mache das über rgba(0,0,0,0.25)
Könnte jemand einen Test mit der kürzlich hinzugefügten Funktion für die Nummerierung von Codeblöcken/Themen durchführen? Vielen Dank im Voraus.
