8

序章

Deck.jsやReveal.jsなどの HTML5 ツールは、見栄えの良い数学を MathJax で簡単に追加できる科学的なプレゼンテーションなどのプレゼンテーションに最適です。

科学的なプレゼンテーションに密接に関係しているのは印刷されたポスター (例) で、HTML と CSS を使用してそれらを作成することは可能ではないかと考えています。これは私には良い考えだと思われます。理由は次のとおりです。

  • 画像、表、数学などをすべて簡単に含めることができます
  • 典型的なグリッドベースのレイアウトは、一般的にポスターと HTML/CSS の両方にあります。
  • コンテンツはプレゼンテーションから十分に分離されているため、再利用が容易になります (プレゼンテーションとポスターの間など)。
  • ポスターのコピーは、ほとんど変更せずに Web 上で共有できます

問題は、ほとんどの CSS フレームワーク (例: Bootstrap ) は固定幅のレイアウトを許可していますが、すべてのコンテンツに合わせてページが必要なだけ下にスクロールすると想定していることです。一方、ポスターの場合、レイアウトは、紙の正確な寸法を満たすグリッドを使用して、水平方向と垂直方向で同様に動作する必要があります。

質問

  1. 固定幅および固定高さの 2D グリッドでコンテンツを簡単にレイアウトできる CSS フレームワークはありますか?
  2. HTML ページから A1 サイズの PDF に変換するために必要な特別なテクニックはありますか?

編集：

私は LaTeX について知っており、プレゼンテーションやレポートの作成に使用しています。ポスターにも使用できますが、私の経験では、最も基本的なポスター レイアウトを変更する必要がある場合は、より多くの微調整と知識がすぐに必要になるということです。

4

2 に答える 2

1

印刷用ポスター用に独自の CSS/HTML テンプレートを展開するのは、驚くほど簡単です。デフォルトが奇妙で、グラフィックス、レイアウト、色の扱いが鈍い LaTeX よりもはるかに簡単です。また、レイアウトの作成においてより多くの一貫性と「再利用/プログラミング可能性」を提供するため、PowerPoint よりもはるかに優れています。

まず、用紙のサイズを設定する必要があります。

body {
width: 48in;
height: 36in;
}

次に、一般的なレイアウトが必要です。

<body>
<div class="poster">
  <h1 class="poster-title">...</h1>
  <h2 class="poster-authors">...</h2>
  <h3 class="poster-affiliations">...</h3>
  <hr class="fancy-line">
  <div class="container">
    <div class="row">
      <!-- A bunch of Bootstrap columns (but here it would be a good place to
      use CCS Grids too) -->
    </div>
  </div>
</div>
</body>

また、Bootstrap のような CSS ライブラリのデフォルトが気に入った場合は、ほとんどのコンポーネントでそれを使用できます (特にパネルが気に入っています)。

よりきれいなレイアウトのために、いくつかの新しいフレックスボックス スタイルを使用することもできます。

喜んで共有したいアイデアに基づいたテンプレートがあります (使用したツールの説明が少し長くなります)。

そして、これで作成されたポスターの例です

すぐに使用できる CSS フレームワークではありませんが、重要なことは、任意の CSS フレームワークの上に配置できるカスタム CSS のわずか 20 行です。

于 2017-11-15T21:31:15.320 に答える
0

LaTeXを試してみませんか。これは html や css ではなく、コード ベースであり、共有したサンプル ポスターのようなものや、本当に素晴らしいプレゼンテーションを作成できます。

LaTeXilla (Linux)をダウンロードするだけです。

利用可能な LaTeX ポスター テンプレートがたくさんあります。

于 2013-04-29T13:39:44.983 に答える