問題タブ [typography]

だから私は自分のウェブサイトの再設計のためのレイアウトを持っていて、左側の画像を右側のテキストのベースラインに揃える方法を見つけようとしています. 左側の画像は実際にはテキストであるため、ベースラインに合わせる必要がありますが、@font-face として統合する代わりにタイトルとして質素に使用されています。@font-face を使用したとしても、それらを div 間で整列させる方法はありますか? 助けてくれてどうもありがとう！ここで画像を見つけることができます: http://personal.justgooddesign.net/stuff/Home.jpg

このホームページの例では、「自己紹介」を「私の名前はジャスティンです」というベースラインに合わせたいと考えています。「FALL BLOSSOM」に合わせて「my work」を配置し、他のページなどでこれを実行できるようにします。

' と ' (中引用符) のペアを自動的に閉じるように Vim を設定したいと思います。

見つけた 5 つのプラグイン (2 つのオートクローズ、サラウンド、クローズペア、デリミトメイト) をすべて構成しようとしましたが、成功しませんでした。' を再マップすることさえできないようです（:imap ‘ ‘’<left>または同様の方法で）。

Arch Linux で Vim 7.3 を使用し、uim 1.7.0 入力方式を使用しています。.XCompose で定義されたショートカットを介して ' and ' を挿入します。¡! また ？。

webOSはどのフォントをWebブラウザに同梱/サポートしていますか？

具体的には、Webページのスタイルシートで指定してwebOSデバイスで正常に表示できるフォントはどれですか。

「ウェブセーフフォント」のリストを探していません。webOSのブラウザがテキストをレンダリングできるフォントのリストを探しています。

ここで何かを見落としていないことは 99% 確信しています。通常のリセットが行われ、h タグにマージンやパディングがなく、line-height:100% などがありますが、それでも h タグの上下に約 2 または 3 ピクセルのパディングがあります。ほとんどの主要なサイトで同じなので、おそらくやむを得ないと思いますか? それは論点のように思えるかもしれませんが、それは私の調整をわずかに台無しにしています.

それで、あなたが何をしても、すべてのフォントの周りにわずかなパディングがあるという避けられない問題はありますか?

Google ドキュメントのようなテキストをレイアウトするための JavaScript レイアウト エンジンは存在しますか? 私は、Google Docsが物事を機能させるためにいくつかのクレイジーなことをしていることを知っています（Microsoft Office Onlineが非常に似たようなことをしているのと同じようdesignModeに完全に避けています）。contentEditable

アンカー タグに次の CSS ルールがあるとします。

もちろん、ブラウザーでレンダリングされるものを監視することで、現在のアンカー要素のテキストをフォーマットするために、これらのフォントのどれが既に使用 (適用) されているかを判断できます。

ただし、JavaScript (jQuery など) を介して現在使用されているフォントを知る必要があります。このjQueryコードは役に立ちません：

返すから'Helvetica, Verdana, Calibri, Arial, sans-serif;'。現在どのフォントが動作しているかを知る方法はありますか?

更新: @MC の回答に基づいて、このフィドルを作成しました。うまく機能していることを確認できます。

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

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

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

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

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

次のような Web サイト用の装飾フォントを試してみたいと思います (例として):

http://www.dafont.com/nymphette.font

いつものように、Web の場合、フォントとライセンスの形式の互換性を確認する必要があります。問題ありません。問題は、副作用のないページへの適切な統合に関連しています。文字テーブルでわかるように、装飾は通常の文字 (「A」など) にマップされます。A にマップされた装飾を使用したいとしましょう。外部フォントをサポートしていないブラウザで Web ページを使用した場合、またはフォントがまだダウンロードされていない場合、装飾は「A」としてレンダリングされ、混乱を招きます。アクセシビリティをサポートするブラウザは、おそらく文字を大声で話すでしょう...

それを避ける方法は？

ありがとう。

PS もちろん、単純な画像装飾を使用する方が簡単に見えます。私の質問は、問題を解決することとは関係ありません。むしろ、このアプローチを試して、どのように機能するかを理解することです。

** 更新: CSS にフォントを埋め込む方法を知っていることを明確にし、既に Google の「通常の」(アルファベット) フォントを使用しています。アルファベット フォントと装飾フォントの違いは、前者のフォントでは読みやすいテキストを明確にエンコードすることです。「セリフ」などのフォールバックを指定することで、ロード中の不都合を最小限に抑えることができます...装飾フォントでは、文字を使用してグラフィックスを表現しているため、疑問があります。

HTML / CSSでタイポグラフィを使用する場合の一般的な問題は、スウェーデン語で「horunge」（英語では「widow」）と呼ばれるものです。

それは何ですか：

幅が200pxで、「タイプミスが大好きです」というテキストのボックスがあるとします。これで、テキストが壊れて次のようになります。

タイポグラフィが大好きです

デザイナーとして、私は単語のろくでなし（単一の単語/行）を望んでいません。これがドキュメント/PDFなどの場合、私は前に単語を壊して、次のようになります。

タイポグラフィが大好きです

これははるかに良く見えます。

CSSルールまたはJavaScriptでこれを解決できますか？ルールは、単語が一列に空にならないようにすることです。

追加することで解決できることはわかっていますが<br />、動的な幅、フィードコンテンツ、さまざまな翻訳、ブラウザのフォントレンダリングの問題などで機能する解決策ではありません。

更新（解決策） このjqueryプラグインで問題を解決しました：http：//matthewlein.com/widowfix/

ページhttp://aurorasvoice.org/index.php?option=com_content&view=article&id=37&Itemid=4を見ると、写真と伝記を含むデータ行を含む大きなテーブルが表示されます。td 部分で valign="top" を使用して、各行の上部に配置できるようにしましたが、写真は略歴より少し高いようです。助けはありますか？たぶんスタイル設定？

ありがとう！