Ich entwickle ein Typografie-orientiertes Wordpress-Thema [1], und ich bekomme Probleme mit den In-line-Bildern.
Ich kann jedes Element steuern und seine Zeilenhöhe, den unteren Rand usw. anpassen, um den vertikalen Rhythmus beizubehalten. Da Bilder, die durch den Editor eingefügt werden, eine große Höhe haben können, stören sie natürlich den gesamten folgenden Inhalt.
Die Frage ist also, ob es möglich ist, Margin, Padding, beide oder eine andere Lösung zu verwenden, um sicherzustellen, dass sie sich unabhängig von der Bildgröße an die Grundlinie anpasst.
Ich weiß, dass es einige Alternativen gibt, wie zum Beispiel, dass alle Bilder zu einem Vielfachen der Zeilenhöhe werden, damit ich den Rhythmus halten kann. Eine andere Option wäre die Verwendung von Javascript, nicht ideal, aber wenn es keine CSS-Lösung gibt, muss ich darüber nachdenken.
[1] Wie Sie sehen können, handelt es sich um ein css-bezogenes Problem und nicht um ein Wordpress-Problem. Deshalb stelle ich diese Frage hier.
(bearbeitet - neue und verbesserte Lösung)
Ich weiß nicht, ob WordPress eine Möglichkeit bietet, Wrapperdivs um Bilder herum zu erzeugen, aber wenn es funktioniert, sollte das funktionieren. Es ist ziemlich robust angesichts verschiedener Textmaßstäbe und Bildgrößen, obwohl Sie möglicherweise die Länge der Zeichenkette mit generierten Inhalten aus abwechselnden Leerzeichen und nicht brechenden Leerzeichen anpassen müssen, je nachdem, wie groß oder klein Ihre Bilder sind.
Dies funktioniert so, dass ein negativer Rand verwendet wird, um den äußeren Bildumbruch gerade genug breiter als der innere Wrapper zu machen, sodass ein nichtbrechendes Leerzeichen in eine Zeile passt, bevor ein Umbruch stattfindet und dann generiert wird eine Reihe von abwechselnden, nicht brechenden und normalen Räumen, die sich jeweils eine Zeile entlang der rechten Kante füllen, bevor sie auf die darunter liegende Zeile übergehen. Schließlich wirkt ein negativer Rand, der einer Zeilenhöhe entspricht, der teilweise gefüllten Linie von Räumen unterhalb des Bildes entgegen.
%Vor%Wenn Sie das nur mit CSS machen wollen, müssen Sie die Größe jedes Bildes im Voraus wissen. Zum Beispiel in diese Demo :
Ich habe ein 20px Raster und das Bild hat eine Höhe von 150px, also habe ich das Bild in einen Container mit einer Höhe von 160px gewickelt. Dies erfordert zusätzliches Markup:
%Vor% Vielleicht könnte ein solches Markup von einem WordPress-Plugin erzeugt werden, das das Bildmarkup und die minimale Höhe erhält und einen grid-ausgerichteten div -Wrapper ausgibt. (Ich bin mit WordPress nicht vertraut.)
Die Alternative wäre, JavaScript zu verwenden, das in dieser ähnlichen Frage angesprochen wurde.
Ich kann nicht garantieren, dass das alles funktioniert, aber es könnte einen Versuch wert sein:
Wenn Sie sicherstellen können, dass alle Bildhöhen in em angegeben sind, können Sie die Schriftgröße der img -Elemente auf die gleiche wie die line-height festlegen, um sicherzustellen, dass alle korrekt eingefügten Bilder skaliert sind richtig:
Alternativ können Sie versuchen, Bilder in Absätzen zu verschieben, sodass das Bild mit dem richtigen Rhythmus umbrochen wird.
%Vor%Und schließlich, das pure CSS, das Sie-zu-verrückt-haben-müssen, um diese Methode zu implementieren:
<img height="100" vs <img height="100px"
Beachten Sie, das funktioniert ganz gut für 10, und andere Vielfache von 10 und 5, aber es wird ein königlicher Schmerz für so ziemlich alles andere sein.
@PaBLoX, ich glaube, dass es durchaus möglich ist, einen vertikalen Rhythmus nur mit CSS zu erreichen. Die eigentliche Frage ist: "Können Sie einen wiederverwendbaren vertikal-rhythmischen Textbaustein nur mit CSS erstellen?". Jedes Projekt ist anders, verwendet verschiedene Schriftfamilien usw. Obwohl der vertikale Rhythmus auf mathematischen Eingaben basieren soll, ändern sich die Variablen mit jedem Projekt. Sie brauchen vielleicht keinen vertikalen Rhythmus im "Blog-Stil" auf einer Shopping-Site ...
In jedem Fall ist es eine Weile her, dass diese Frage gestellt wurde, aber wenn Sie oder jemand anderes ein Beispiel (Versuch) sehen möchte, ein Muster für den vertikalen Rhythmus zu erstellen, hier ist das Repo auf github: Ссылка
Es ist ein Ausgangspunkt. Ich vermute, dass das Projekt letztendlich aus ein paar verschiedenen Formeln für unterschiedliche Bedürfnisse bestehen wird.
Meiner Meinung nach ist eine reine CSS-Lösung unmöglich. Nehmen Sie zum Beispiel einen Tisch. Eine Tabellenzelle hat standardmäßig ein wenig Padding, so dass der Inhalt lesbar ist. Sie könnten versuchen, jede Tabellenzelle genau auf die richtige Höhe zu bringen, aber das wird schwierig. Wenn Sie beispielsweise einen unteren Rand hinzufügen, wird auch die Höhe des Elements erhöht, was bedeutet, dass Sie damit rechnen müssen. Ich mag die Art und Weise, wie die vertikalen Rhythmus-Tools von Compass helfen, einen vertikalen Rhythmus beizubehalten, aber für Inline-Bilder und zum Beispiel Tabellen habe ich festgestellt, dass reines CSS fehlt. Aus diesem Grund habe ich ein einfaches jquery-Plugin geschrieben, das dabei helfen könnte: Ссылка
Einziger Nachteil ist, dass für Inline-Elemente ein Offset benötigt wird. Ich habe noch nicht herausgefunden, ob das automatisiert werden kann. Der Offset, den Sie nur finden können, indem Sie es ausprobiert, fand ich, dass ein Offset von 6 (Standard) am besten für Baselines von 21-24 Pixel funktioniert, aber es kann sein, dass die Schriftgröße einen Einfluss hat. Fürs Erste, als Beweis für das Konzept, habe ich festgestellt, dass es sehr gut funktioniert. Es funktioniert auch für reaktionsfähige Bilder (window.resize). Hoffe, das hilft.
Ich würde vorschlagen, ein CSS-Framework wie Foundation oder Bootstrap und Compass + SCSS zu verwenden, um damit zu helfen. Ich habe tatsächlich einige Arbeit geleistet, um Foundation mit einem anständigen Standardsatz von Regeln für den Vertikalrhythmus einzurichten, den Sie direkt aus der Box verwenden können. Ich habe einen Blogpost, der es erklärt und einen Link zu einer Pull-Anfrage auf Github hat.
Damit können Sie einige anständige Basis-CSS für Ihre Typografie und andere Seitenelemente generieren. Oder Sie können die Technik einfach auf Ihr bestehendes CSS anwenden. Es ist ein bisschen langweilig, aber es ist nicht so schwer.
Tags und Links javascript css typography vertical-rhythm