HTML & CSS для печатных плакатов

Вступление

Инструменты HTML5, такие как deck.js или show.js, отлично подходят для презентаций, включая научные презентации, в которые с помощью MathJax можно легко добавить красивую математику.

С научными презентациями тесно связаны печатные плакаты ( примеры), и мне интересно, можно ли использовать их для создания HTML и CSS. Мне кажется, это хорошая идея, потому что:

  • Изображения, таблицы, математика и т. Д. Могут быть легко включены
  • Типичные макеты, основанные на сетке, обычно представлены в виде постеров и HTML/CSS.
  • Содержание будет хорошо отделено от презентации, что сделает повторное использование проще (например, между презентациями и постерами)
  • Копия плаката может быть размещена в Интернете с небольшими изменениями.

Проблема в том, что большинство CSS-фреймворков (например, Bootstrap) допускают макеты фиксированной ширины, но предполагают, что страница будет прокручиваться вниз настолько, насколько это необходимо, чтобы вместить весь контент. С другой стороны, для плаката макет должен вести себя одинаково в горизонтальном и вертикальном направлениях с сеткой, которая заполняет точные размеры бумаги.

Вопросы

  1. Существуют ли какие-либо CSS-фреймворки, которые позволяют легко размещать контент в 2D-сетке с фиксированной и фиксированной высотой?
  2. Нужны ли какие-либо специальные методы для перехода со страницы HTML, скажем, в формат PDF формата A1?

Редактировать:

Я знаю о LaTeX и использовал его для презентаций и отчетов. Можно использовать его и для плакатов, но мой опыт показывает, что это очень быстро требует гораздо больше настроек и знаний, если вам нужно изменить самые основные макеты плакатов.

Источник

2 ответа

Удивительно просто развернуть свой собственный шаблон 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>

И если вам нравятся настройки CSS по умолчанию, такие как Bootstrap, вы можете использовать их для большинства компонентов (особенно мне нравятся панели).

Вы также можете использовать более новые стили Flexbox для аккуратного макета

У меня есть шаблон, основанный на тех идеях, которыми я с удовольствием поделюсь (и несколько более длинное описание инструментов, которые я использовал)

А вот пример постера, построенного на нем

Это не готовый к использованию CSS-фреймворк, но, что важно, это всего лишь 20 строк пользовательского CSS-кода, которые вы можете поместить поверх любого CSS-фреймворка.

Источник

Почему бы тебе не попробовать LaTeX. Это не html или css, а основанный на коде, и вы можете создавать примеры плакатов, которыми вы поделились, и некоторые действительно классные презентации.

Все, что вам нужно сделать, это загрузить LaTeXilla (Linux).

Существует множество шаблонов постеров LaTeX.

Источник
Другие вопросы по тегам