booktype-ru
Некоторые хитрости
В работе с CSS есть некоторые хитрости, а среди них есть такие, которые относятся именно к книгам.
Самое главное, что вы можете протестировать ваши задумки на локальном компьютере и увидеть результаты своих хитростей. Если вы публикуете книгу в Booktype, вы получите ссылку на PDF, которая выглядит примерно так:
http://objavi.booki.cc/books/awebpageisabook-en-2012.03.25-05.56.42.pdf
Отсюда вы получаете интересную и доселе неизвестную вам информацию. Скопируйте и вставьте URL вашей книги, удалите все, что следует за "objavi.booki.cc" и вставьте вместо этого /tmp/ eg:
http:objavi.booki.cc/tmp/
Вы увидите список папок с книгами. Отыщите в нем вашу (используйте сочетание клавиш ctrl-f и ищите последнюю часть url без суффикса, например, ищите for awebpageisabook-en-2012.03.25-05.56.42). Вы найдете папку, которую сможете открыть и увидеть в ней следующее содержимое:
Если вы загрузите файл body.html и статическую папку, вы сможете менять файлы CSS и наблюдать результаты в вашем браузере. Body.html содержит всю информацию для вашей книги, включая разделы, но не оглавление (оно добавляется позже). Чтобы редактировать CSS и получить желаемую версию, вы можете вырезать и вставить ее в ваше окно Booktype Advanced CSS.
Что если моя CSS не отображается?
Иногда вы применяете правило CSS и не видите никаких изменений. Есть два способа справиться с проблемой. Во-первых, используйте правило '!important'. Это правило отмены, которое можно применить к любому правилу CSS и сделать его приоритетным. Например:
h1{
font-family:Georgia,serif ! important;
}Такм образом вы отменяете любые правила, конфликтующие с h1.
Другой способ проверить CSS для вашей книги - открыть файл body.html, изменить CSS нужным вам образом, а затем установить динамическую панель CSS типа Firebug. Это непростая процедура, возможно, вам понадобится посторонняя помощь, но по существу эти программы встроены в ваш браузер, и они позволяют вам проверять и изменять правила CSS динамически.
Условные правила
Это не слишком широко известный факт, но в CSS есть условные правила. Вы можете использовать символ '+' для сочетания элементов, чтобы применять правила только к паре каких-либо из них. Например, вы можете сделать так:
h2+p {font-style:italic;} Таким образом первый абзац после заголовка h1 будет отображаться курсивом.
Psuedo Elements
Целью изменения можно выбирать многие элементы, например, первые буквы абзаца. На жаргоне CSS это называется псевдо-элементы. Например, вы можете изменить первые буквы всех абзацев следующим образом:
p:first-letter {
font-size: 3.5em;
line-height: 1em;
font-weight: 400;
float: left;
margin: 0 0.107em 0 0;
}Что придаст эффект врезания большой буквы в тело абзаца. Если вы хотите применить это только к первому абзацу каждой страницы, вам нужно использовать выражение условия:
h2+p:first-letter {
font-size: 3.5em;
line-height: 1em;
font-weight: 400;
float: left;
margin: 0 0.107em 0 0;
}
Псевдо-элементы существуют для многих интересных случаев, включая lang, first line, after и другие. Полный список псевдо-элементов можно найти на сайте W3C: http://www.w3schools.com/Css/css_pseudo_elements.asp
Webkit
Важно помнить, что для создания PDF Booktype использует Webkit. Что означает, что любые хитрости CSS, на которые способны Chrome или Safari, доступны для Booktype.
EDIT