問題タブ [vertical-rhythm]

私はこのjQuery関数をまとめました。div.article目的は、画像の高さとドキュメントのベースライングリッド（20ピクセル）のバランスをとるために、内部のすべてのimg要素のマージンを計算することです。ベースライングリッドに一致させるには、すべての画像の高さを20の倍数にする必要があります。そうでない場合、たとえば1つの画像の高さが154ピクセルの場合、関数は画像に6ピクセルのマージンを追加し、ベースラインとのバランスを取ります。グリッドが復元されます。

この関数は正しく機能するので、実際の質問は次のとおりです。私はプログラマーではないので、コードは機能しているのに非常にくだらないのではないかと思います。もしそうなら、コードをどのように改善できるでしょうか。

jQueryコード：

HTMLコードの例、キャプション付きのimg：

HTMLコードの例、キャプションなしのimg：

編集：Russ Camの提案に基づいて洗練されたコード：

さまざまなサイズの複数の見出しの最初の行を同じベースラインに揃える方法はありますか? また、それに続くテキストにも関係なく、これも整列する必要があります。

http://snapplr.com/snap/z1mwで写真を参照してください。

編集：再アップロード：

代替テキスト http://img144.imageshack.us/img144/7615/screenshot2010021722h53.png

唯一の解決策は、各見出しと各本文テキストを別々の DIV に配置し、見出しを padding-top または margin-top で並べて配置することです (たとえば、H1 は 0px のマージンで 36px になりますが、H3 は24 ピクセル、上余白 12 ピクセル）。このようなもの：

しかし、これはあまり良い解決策ではありません。もっと良いものはありますか？

どうもありがとうございました！

これがあなたのための（奇妙な）ものです。

私は、画像を 18 ピクセルのベースライン グリッド上に配置することが重要な WordPress サイトで作業しています。画像の合計サイズは常に 18 ピクセルの倍数で、高さは 8 ピクセル余分にトリミングされています。これは主にレイアウトの問題であり、画像をテキストとうまく組み合わせることができます。

WP/GD 機能にフックする方法を見つけようとしています。

1. 画像は通常どおりにサイズ変更され (サムネイル、中、大)、WP 管理者のみで最大幅を設定します。
2. 画像の高さは (数学、丸め?) X の最も近い倍数の値 (この場合は 18px) にトリミングされます。
3. 新しい高さを使用して、高さの別の X 値 (この場合は 8px) を差し引いて再度トリミングします。

最終結果は、理想的には、マルチサイト環境で個々のユーザーに対して値をアクティブ化および編集できるプラグインになります。

検索して検索しましたが、どれも賢明ではありません。

アイデアや（有料の）ヘルプは素晴らしいものです。どうもありがとう！

F.

タイポグラフィ指向の wordpress テーマ [1] を開発していますが、インライン画像で問題が発生しています。

すべての要素を制御し、行の高さ、下マージン、ecc を調整して、垂直のリズムを保つことができます。ただし、エディターを介して貼り付けられた画像は任意の高さになる可能性があるため、後続のすべてのコンテンツを明らかに混乱させます。

したがって、問題は、マージン、パディング、両方、または別のソリューションを使用して、画像サイズに関係なくベースラインに調整できるかどうかです。

すべての画像を行の高さの倍数にするなど、いくつかの選択肢があることを知っています。そうすれば、リズムを保つことができます。他のオプションはjavascriptを使用することですが、理想的ではありませんが、cssソリューションがない場合は検討する必要があります.

[1] ご覧のとおり、これはワードプレスの問題ではなく CSS 関連の問題です。そのため、この質問をここに投稿しています。

一貫した垂直リズム (整列されたベースライン) を持つ 2 列のレイアウトを構築しようとしています。この計算は非常に簡単で、うまく機能しています。私の質問はこれです：

テキストの 2 つの列が並んでいる場合、列の垂直余白が「行全体」でない場合、垂直のリズムを維持 (または回復) することは可能ですか?

この例では: http://jsfiddle.net/beejamin/PMCXt/リストとリスト項目の両方に「半分の行」の margin-bottom がある順序付けられていないリストがあります。リスト項目の数が偶数の場合、余白は行全体になり、リズムが保たれます (これは良いことです!)。ただし、奇数の場合、ベースラインは破棄され、再び参加することはできません (運が良く、別の奇数のリストが表示されない限り)。

リスト項目に行全体の余白を設定するのは (特に長いリストでは) 多すぎます。余白を設定しないのは十分ではありません。

これを回避/軽減できる方法はありますか? 行数は事前にわかりません。また、これに JavaScript を使用したくありません (再利用できる一般的なスキームを構築しようとしています)。

この縦リズム設定ツールについて：http: //drewish.com/tools/vertical-rhythm

私の p には、1.25em の margin-bottom と 0em の margin top が必要です。

p にある私の 16px フォントには、0 の margin-bottom と 1.25em の margin-top が必要です。

pを呼び出さずに16pxのスタイルを設定するにはどうすればよいですか?

画像の垂直リズムを維持するためのソリューションを求めて、Filipe Fortes http://www.fortes.com/2008/jmetronome-using-jquery-to-keep-typographic-rhythmからこの優れたスクリプトを見つけました。

それは私にとっては非常にうまく機能しますが、私はモバイルプロジェクトに取り組んでいるので、それを純粋な JavaScript に変換する方法を考えています。

TwitterのBootstrapプロジェクトの垂直リズムを維持するための既存のプラグイン/拡張機能/メソッドはありますか？

優れた垂直リズムテンプレートを作成するのは非常に骨の折れる作業です。プリベークされたソリューションを使用したいと思います。私は創造的な提案を受け入れています。私は自分のページを最終的にうまく整列させたいだけです。

編集：私が何を求めているのかを明確にするために...

垂直リズムは、ページ上のすべての要素が水平グリッドに従って整列するようにするために使用される手法です。これは、すべてのアイテムの高さ、パディング、およびマージンを標準の単位ラインサイズに一致するように設定することによって実現されます。段落内のテキスト行の高さが20px（余白とパディングを含む）の場合、見出し4も20pxの高さになり、見出し1の高さは40pxになる可能性があります。これにより、列全体でテキストのリズムが維持されます。

この手法をブートストラップ（Twitterから）と組み合わせて使用​​したいのですが、すべてを美しく見せるためにはかなりの作業が必要になります。たとえば、すべてのボタンは、段落テキストなどと同じ垂直方向の高さの定義に準拠する必要があります。ブートストラップで使用される他の標準コントロールもあり、高さを適切に定義するためのルールも必要です。

私は垂直リズムの一般的な解決策から始めることができました。それは私が望むものを達成するのに大いに役立ちますが、他の誰かがこれを始めたかどうか、またはこれを達成する別の方法のアイデアを持っているかどうかを知りたいと思いました。

編集：私が欲しいもののようなものは何もないと仮定して...

たぶん、ちょうど良い垂直リズムベースのcssテンプレートが良い出発点になるでしょう。できれば、開発が続けられ、すでに使用可能で、よく考えられ、適応できるものが望ましい。

私は垂直リズムを理解し、一日中読んで、いくつかのことを試しましたが、スクリーンショットでわかるように、コンパスパディングトレーラーを正しく適用できなかったため、レイアウトが壊れ続けています：

！スクリーンショット

• 背景が黄色の線が私のhrタグです。
• 背景がオレンジ色のものは記事です。

これが私のコードです：

HTML：

CSS：

わかりやすくするために、HRのスタイルをコメントしました。

ギャップがより目立つ別の例を次に示します。

！スクリーンショット2

ここで何が間違っているのかわかりません。このプロパティを理解するために私を助けてください。

リンク：

• http://compass-style.org/reference/compass/typography/vertical_rhythm/#mixin-trailing-border
• http://www.youtube.com/watch?v=ls3Clk-kz3s&feature=player_detailpage#t=464s

Webデザインの行の高さと印刷の行の高さ（InDesignなど）は同じではありません。結果は近いです：

• Webhttp ://jsfiddle.net/Y9M28/4/（Webkitの方が良い）
• 印刷物http://jsfiddle.net/Y9M28/3/

私はたくさんのトリックを試しますが、私の印刷サンプルでわかるように、最後の段落は複数行のために悪いマージンを作ります。最新のブラウザでそれをより良くすることは可能ですか？私はhttp://baselinecss.com/を知っていますが、これは多くの相対的な位置と上部の調整であり、実際には柔軟ではありません。

最後の解決策は、多くの単一行の個別の複数行ブロックにjavascriptを追加することです（ただし、重い）。