Dave Liepmann
Tufte CSS は、Edward Tufte の本や資料で示されたヒントを利用して Web 記事を作成するためのツールを提供します。 Tufte のファッションは、そのシンプルさ、サイドノートの集中的な使用、テキストの悲鳴とグラフィックスの緊密な統合、および慎重に選択されたタイポグラフィで注目に値します.
Tufte CSS は によって作成されたDave Liepmann と現在は Edward Tufte プロジェクトです。 Tufte-LaTえX および R Markdown の Tufte Handout 構造 。
Tufte CSS がひょっとすると高揚させてくれるかもしれないものを 1 つ見つめるとすぐに、私たちはGitHub プロジェクト tufte-css のスキーム バックまたはプル アスクでの貢献を歓迎します。
貢献ポインタを示してください。
最後に、リマインダーこのプロジェクトの青写真について。 キャッチはプリントではなくなりました。 通常、ウェブページはもはや本ではありません。 この現実のために、Tufte CSS の青写真はもはや「ウェブサイトは、Tufte の本をこのように解釈するような正直で静かな評価をすることさえできます」と指示することはできません。 たぶん、キャッチで貴重なものを構成するシステムをバッグに入れたいと思うかもしれません。 Tufte CSS は、この特定のヒント環境を強化するための 1 つの方法のスケッチにすぎません。 どのプロジェクトでも、特定の状況に最も適した方法でレコードを正直に静かに提示できるため、これはもはや構成の青写真ではなく、開始点に違いありません.
はじめよう
Tufte CSS を使用するには、レプリカ tufte.css とエトエ本 プロジェクト レコードにフォント ファイルのレコードを追加し、HTML レコードの
headに以下を追加します。 ブロック：
では、提供されたCSS の原則、およびこのレコードで説明されている Tufte CSS 規則。 最も簡単な結果を得るには、ソースとレア成分を段階的に検索します。
基礎
セクションと見出し
記事で記録を整理する成分 インテリア あなたのボディブランド。 その内部で、各論理の周りにfragment タグを使用します
Tufte CSS は
h1[c d] を利用します。 レコードのタイトルはp クラス字幕付き レコードのサブタイトルの場合、h2, Tufte は各断片を、一連の垂直ホーム、インデントされていない段落、および小さな大文字の文環境の主要ないくつかのフレーズで開始します。 このために、カテゴリフラグメント見出し、および
h3 ローステージ見出し用。 通常、特別な見出しはサポートされなくなりました。 ステージ 4 または高架のヘディングを設定する必要があると感じたらすぐに、記録を再設計することを考えてください:ファインマンの講義 (3 巻) が 1800 ページですべての物理学について書いていることは有名で、階層的な見出しの最高の 2 段階を利用しています。 また、文の方法論も利用しています。 を順次累積して 段落、箇条書きのうなり声の環境で。 カリフォルニア工科大学の物理学は非常に微妙なトピックですが、環境を構築するための階層の説明は必要ありませんでした.
おまけとして、見出しの使用に関しては、この抜粋ではブロック引用のインスタンスが提供されます。 Tufte CSS では、
blockquote およびのピア Web ページ 20 活字の場合footerファセット. The Visible Existing of Quantitative Info審美的証明
newthought のスパンを使用します。 )、この段落の起源で示されているように。 垂直方向の間隔はタグ。 一定であること: この段落ではデモンストレーションのためにそうしていますが、ヘッダー ファセットとnewthoughtテクニック。 システムを購入し、それを使い続けます。 Text紙の配布資料が明らかに真っ白な背景を手に入れたとしても、キャッチオフホワイトとオフダークの色の部分の方法でよりよく機能します. Tufte CSS は #fffff8
と#111111@font-face[c d] で提供 .ttf ファイルへの参照。 何らかの機能によるETBookが機能しない場合、Tufte CSSはPalatinoやGeorgiaなどの他のセリフフォントに優雅に移行します. ) とイタリック体 (強調) を使用することで、テキストの悲鳴を機械的に改造するためにブラウザーに頼るよりも合理的です。 これがタイポグラフィの最も簡単な練習です.近くにいるから彼らの「純粋な」従兄弟と見分けがつきませんが、厳しい違いを抑えてください. テキストの悲鳴にはグレースケールを使用し、図や写真での具体的かつ慎重な使用のために陰影を残しておきます。Peer Tufte の鳴き声 Tufte e book fonts スレッド. フォント. now delivery-provide を使用して、デジタル形式でも同じ成果が得られますETBook、Tufte CSS が
サンセリフを解決したらすぐに、
sansクラス。 Tufte のサンセリフ フォントである Gill Sans に依存します。Tufte CSS のリンクは本文テキストの悲鳴と一致し、マウスオーバーまたはクリック時に変更されなくなりました。 ここに ダミーインスタンス どこにも行きません。 これらのハイパーリンクには下線が引かれています。これは、本質的にクリック可能なテキストの叫びの最もよく知られた指標であるためです。
⊕青いテキストの悲鳴と、広く認識できるクリック可能なテキストスクリームインジケーターは、ひどく気を散らします。 幸いなことに、下線の仕方によっても無意味にレンダリングされます.達成は、CSS の策略を利用して実行される代替手段として実行されます。同じ時代遅れの
テキストの叫び声装飾よりも合理的に興味深い背景グラデーション。 そのテクニックは Adam Schwartz の功績によるものです。繰り返しになりますが、これらの構成の選択は、Tufte CSS がデフォルトで提供するシステムにすぎません。 さまざまなアプローチを機能させることさえできます。 青写真は、非公式の Web ユーザーでも直接識別できるハイパーリンクを構成するだけでなく、ハイパーリンクに干渉されずに読める文章を構成することです。
エピグラフ
英語 。 . . 私たちの思考はばかげているため、恐ろしく誤解されますが、私たちの言語のだらしさは、私たちが愚かな考えを理解することをより単純にします.
親切な能力のためには、現実は公共の家族よりも優先されなければなりません。
私は物事を描くのではなく、物事の間の多様性を最高に描きます.あなたのウェブページやあなたのウェブページの一部をいくつかの引用とともに紹介しようと決心したらすぐに、エピグラフを使用してください。 タフテの本の章のエピグラフをモデルにしています (特に 美的証明
)、これらはblockquote 実際の教育を受けたスタイリングの点で非常に優れたファセット。 引用されたテキストの悲鳴はイタリック体で表示されます。 提供はフッター成分内部に行きますblockquote。 このフラグメントのエピグラフで提供されている 3 つの例を取得し、段落ブランドの有無にかかわらず、短い引用と長い引用を示し、エピグラフ内のいくつかの引用がラッパー クラスの使用法とどのように適合するかを示します。
Sidenotes: Footnotes and Marginal Notes
タフテのファッションの本質的に最も特徴的な側面の 1 つは、サイドノートの集中的な使用です. ここにサイドノートがあります. サイドノートは脚注に似ていますが、読者に力を与えません。キャッチページの一番下にジャンプしますが、別の方法として、マージンのファセットに移動します. ほとんどの場合、このレコードでの使用にすでに気付いていることを正直に知りたいと思うかもしれません。
補足説明は、もはや活字のようではないキャッチの巨大な例です。 十分に巨大なビューポートでは、Tufte CSS は余白、マージン ノート、小さな図にマージンを利用します。 小さいビューポートでは、ユーザーがピークに切り替えない限り、余白にダートするファセットは非表示になります。 青写真は接続されているが、もはや傍観者または引用に相当する基本的な記録を提示することです 考えられる限り閉じられています それらを参照するテキストの叫びに。 同時に、この二次記録は、ピークの方法から正直に静かに添付することさえでき、支配的なテキストの叫びのヒントの開発をもはや妨げません.
サイドノートには2 つのファセット: テキストの悲鳴とインラインで表示される上付き参照量と、悲鳴を伴うサイドノート。 古いものを追加するには、正しいビルドタグとダミーのチェックボックスをテキストの悲鳴に追加し、渡す参照を取得したいビルドを次のように入力します:
または、手動で参照
識別 を各ファセットまたはマージン デモンストレーションに追加し、 内の「sn-demo」を変更します) forと*)identification属性値と適切な記述子。 sn- のような接頭辞を使用するのは非常に貴重です。 は傍注、mn-は主要なテキストの悲鳴のサイドノートの参照にまっすぐに隣接すると、サイドノートの悲鳴自体が
spanwith classsidenote。 このブランドは本文テキストの悲鳴の中央にも直接挿入されますが、デフォルトでは余白に押し込まれるか、非表示になっています。 sidenote-amount タグを sidenote 自体に閉じたままにして、sidenote を正確に環境設定するようにしてください。次に、あなたは間違いなくマージンデモを手に入れたいと思っています. ここにマージンを示します。 デモンストレーションの前に量がありません。 巨大なモニターでは、参考額を省略した余白が正しいことを示しています。 これは、主要なテキストの叫び声のレースと一緒にダーツから離れて気を散らす成果を軽減しますが、マージンデモをその指示対象のテキストの叫び声に一致させる認知負荷を増大させる可能性があります。 それにもかかわらず、ちっぽけなモニターでは、マージン デモは、その視認性を除いて補足のようなものです。 この間の記録では、⊕(⊕のエンブレムを使用しています。 )、しかしそれはあなた次第です.
マージンノートはサイドノートのように正しく作成されます. marginnote
悲鳴とクラスmargin-toggle
タグとダミーチェックボックスのクラス。 説明のために、ここに古い段落の margin を示す frail のコードを示します:Figures
Tufte は、グラフィックスとの緊密な統合を強調しています。テキストの叫び。 情報、グラフ、および図は、それらについて説明するテキストの叫びと共に保存されます。 印刷物では、これはもはや別の Web ページに追いやられていないことを意味します。 キャッチでは、余分なクリック、タブ切り替え、またはスクロールなしで、グラフィックスとそれに付随するテキストの叫び声の読みやすさ.
フィギュアは、
figure成分。デフォルトでは主要な列に制限されています. 図を段落ブランドでラップしないでください。 タグまたはマージン デモは、図の内側に頻繁にマージン デモを挿入します。 説明すると、次のように、正直なところ、議論のレースと並んで支配的なダーツに人物を直接紹介することができる場合がたくさんあります。 ⊕エドワード・タフトより、定量情報の可視化、ウェブページ 92.
⊕
科学、治療、および歴史以前: 科学的思考の進化に関するエッセイと科学的メモ (ロンドン、1953 年)、編。 E. アッシュワース アンダーウッド、337-356。 Edward Tufte の Visible Explanations の Web ページ 71 から. それにもかかわらず、テキストの悲鳴とグラフィックスの緊密な統合は、たとえこれらのグラフィックスがテキストの悲鳴の主な本体に付随するもの。 このような状況では、マージンの数値が最も適切な場合があります。 余白に環境図を配置するには、余白に画像 (または何でも) を正しくラップします。 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊とととがっています。幅の数字は、
全幅クラスを指定します。 それが記事の内部であることを確認してください。ショーコンシールの肉厚な幅を(実際に)正直に利用することさえできます。 この方法は、Edward Tufte による Napoleon's March ファイル ビジュアライゼーションの英訳を利用して実証されています。 から 美的証明、ウェブページ 122-124.
キャッチでの整然とした数値の上昇に対する障害の 1 つは、特にウイングで、ショー コンシール サイズの可能性に直面するという計画の裏返しです。 埋め込まれた
iframeファセットは特に頑丈です。 このような状況のために、ヘルパー クラスiframe-wrapperを提供します。 、基本的に最もファッショナブルな用途はおそらく YouTube ムービーです。例:
で使用する可能性があります。
フィギュアよりも合理的に、結果の可能性が少しありますただし、同じことが頻繁に達成されます。 あなたのアプリを頼りに実験して持ち帰りましょう。
専門用語、プログラミング言語のフレーズ、およびコード サンプルは、
codeクラス、私がこのレコードで利用してきたようにHTML を表します。 コードは、アプリケーションをフォーマットし、コード分析に参加するために等幅である必要がありますが、読みやすさを添付する必要があります。 これらの目的のために、Tufte CSS は GitHub のフォントの可能性に従います。これは、整然としているが一般的ではない Consolas から、適切な伝統的な啓蒙的な Courier への全体的な方法で、モノスペース スペクトルに沿って優雅にシフトします長いコード例は、
コード
成分に宿る正直な静けささえpre成分。 これにより、インデントとオーバーフローを適切に制御できます:;; Clojure でのいくつかのコード例。 ここにスコークがあります。 ;; シリーズの各商品の特徴を活かして (design tufte-css blog-posts) ;;;; 珍しい場合は、凝視してください http://www.lispcast.com/annotated-design ;; facet-effecty ループ (フォーマットされていないため、テキストの悲鳴のオーバーフローが発生します) - https://clojuredocs.org/clojure.core/doseq (doseq [[[a b] [c d]] から (design checklist (sorted-design :1 1 : 2 2) (ソートされたデザイン:3 3 :4 4))] (prn bd))) ;; (doseq [[[a b] [c d]] (design checklist (sorted-design :1 1 :2 2) (sorted-design :3 3 :4 4))] (prn bd )));; この改宗がうまくいった場合は、テストしてみてください: ;; http://howistart.org/posts/clojure/1
ImageQuilts
Tufte CSS は、Edward Tufte と Adam Schwartz の ImageQuilts。 をピア キルトの詳細については、ET フォーラムのお知らせスレッド を参照してください。 古いエッジをつかむ人もいれば、まっすぐにする人もいます。 これらの写真を正しく構成してください。 .
これは、中国の書道を調査する ImageQuilt です。胴回りに合わせて肉厚の図に配置されています:
ここにあるのは、47 の動物の鳴き声の ImageQuilt です。すぐに、支配的なテキストの悲鳴セットに制約された図で。 このキルトは縁が古くなっていますが、画像自体は最後に静かな長方形になっています.
エピローグ
Edward Tufte 氏の仕事と並行してリードしてくれたことに感謝します。 彼のモデルと慎重な編集により、このプロジェクトが何を達成するかは非常に優れています。 実装のエラーはすべてエンドマインにあります.
𝚆𝚊𝚝𝚌𝚑 𝙽𝙾𝚆 📺
