Im Hui zu mehr Durchschuss

Werner Getzmann hat mich gestern gefragt, ob ich den Durchschuss erhöhen könnte. Es geht natürlich um den Durchschuss im typografischen Sinn und um dieses Blog hier. Er stellt die Frage zu recht, denn längere Texte sind wirklich nicht sehr gut lesbar. Das war mir auch schon aufgefallen, aber weil es doch hochgradig mühsam ist, an fixfertigen Themes Änderungen vorzunehmen, habe ich darüber hinweggesehen.

Nun hat Firefox aber eine wunderbare neue Möglichkeit, den HTML- und CSS-Code zu inspizieren. Sie steckt unter Extras > Webentwickler > Untersuchen oder Ctrl + Umschalt + i (⌥⌘i beim Mac).

Fährt man mit der Maus über die Seitenelemente, werden sie hervorgehoben und mit einer Sprechblase markiert, in der das entsprechende HTML-Element ausgewiesen ist. In einer Leiste am Fuss ist als Brotkrumennavigation der Ast im DOM-Knotenbaum aufgeführt. Klickt man einmal mit der Maus, wird der Untersuchen-Modus beendet und man kann die übergeordneten Elemente anklicken und durch einen Klick auf HTML bzw. Style am rechten Rand der Leiste den entsprechenden Quellcode anzeigen.

Sich in fremden CSS-Dateien zurechtfinden

Klickt man auf Style, erscheint am rechten Rand eine Leiste, in der die auf das ausgewählte Element wirkenden CSS-Regeln sichtbar sind. Man kann diese ein- und ausschalten, verändern und Regeln hinzufügen. Die Auswirkungen werden sofort sichtbar, sodass ich bei p nur die Zeile line-height zu ergänzen brauche, um dann auch schon nach dem Prinzip von Versuch und Irrtum herausfinden kann, welche Vorgabe gut aussehen würde. (Ich habe mich für 1.40em entschieden.)

Natürlich werden diese Änderungen nur an der im Browser geladenen CSS-Datei angewendet und sind somit flüchtig. Für eine dauerhafte Änderung muss man sie in der Stildatei auf dem Server vornehmen. Das grösste Problem ist bei einem Theme, überhaupt herauszufinden, wo die fragliche CSS-Datei steckt.

Das eruiert man über das CSS-Panel von Firefox aber leicht: Man wechselt zur Rubrik Eigenschaften, klickt die fragliche Eigenschaft an und erhält am rechten Rand den Namen der Datei und die Zeilennummer angezeigt. In meinem Fall ist das style.css:430. Klickt man auf diese Angabe, öffnet Firefox ein Fenster mit dem ganzen Quellcode, das im Adressfenster auch den Pfad zu der Stildatei angibt. Damit hat man die Datei im Dateisystem nullkommaplötzlich aufgespürt, kann sie editieren und hochladen, und ist dann auch schon fertig.