Знатокам (и любителям) css - новая фича!

Опубликовано сб, 17/12/2011 - 03:24 пользователем golma1
Forums: 
Функциональность

Возникший недавно разговор о том, что текст книги на сайте выглядит не слишком презентабельно, привёл к новой фиче.
Теперь каждый может оформить стиль отображения.
Для этого надо зайти в "Книжную полку" (первая закладка вверху), а там выбрать закладку "css". Voilà!
Перед вами редактор стилей: настраивайте на свой вкус.

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

Опубликовано сб, 17/12/2011 - 09:16 пользователем larin

Я тупо добавил в конец h3.book {text-align : center;} и всё отцентровалось.
Можен надо F5 или CtrlF5?

Опубликовано сб, 17/12/2011 - 11:09 пользователем wotti

Да. всё забегало нормально:

Опубликовано сб, 17/12/2011 - 11:45 пользователем wotti

в общем - запутался я. Одну книгу настраиваю - всё настраивается и центровка и цвет и фон:

открываю другую книгу - изменился только фон

http://s017.radikal.ru/i407/1112/f9/da08edba99a0.jpg

Опубликовано сб, 17/12/2011 - 12:30 пользователем antonius1980

Если имеется ввиду центрирование заголовков, то там есть нюанс:
В первом случае заголовок:
<h3 class="book">
соответственно, правило
h3.book {text-align : center;}
работает.
Во втором же случае:
<h3 class="title">
и правило на него не распространяется.

Нужно добавить, например:
h3.title {text-align : center;}

Аватар пользователя s_Sergius

Опубликовано сб, 17/12/2011 - 12:46 пользователем s_Sergius

antonius1980 написал:

Нужно добавить, например:
h3.title {text-align : center;}

Точно.
А строка:
h5.subtitle {text-align : center;}
центрирует подзаголовки.

А до этого никак не хотело.

Опубликовано сб, 17/12/2011 - 12:56 пользователем wotti

antonius1980 написал:
Если имеется ввиду центрирование заголовков, то там есть нюанс:
В первом случае заголовок:
<h3 class="book">
соответственно, правило
h3.book {text-align : center;}
работает.
Во втором же случае:
<h3 class="title">
и правило на него не распространяется.

Нужно добавить, например:
h3.title {text-align : center;}


Спасибо! забегало!
Аватар пользователя s_Sergius

Опубликовано сб, 17/12/2011 - 15:49 пользователем s_Sergius

Как уже было отмечено, в книгах, залитых давно, код несколько отличается.
Поэтому, чтобы центрирование заголовков и прочие атрибуты работали и в них, лучше продублировать определения h3.title и h5.subtitle и в виде h3.book и h5.book.

У меня получается примерно так:

H3.title{ font-size : 150%; font-style : normal; font-weight : bold; text-align : center; padding-top : 12px; padding-bottom : 3px;} /* Title */
H3.book { font-size : 150%; font-style : normal; font-weight : bold; text-align : center; padding-top : 12px; padding-bottom : 3px;} /* Title */

H5.subtitle{ font-size : 100%; font-weight : bold; text-align : center; padding-top : 9px; } /* SubTitle */
H5.book    { font-size : 100%; font-weight : bold; text-align : center; padding-top : 9px; } /* SubTitle */

Теперь работает и в свежих, и в давних книгах.

Можно еще указать, чтобы подписи авторов в цитатах/эпиграфах/стихах прижимались к правому краю:
blockquote.text-author { text-align : right; padding-right : 50%; }
Но это на любителя, конечно.

Опубликовано сб, 17/12/2011 - 13:00 пользователем wotti

Подскажите как сделать центровку графических вложений?

Аватар пользователя s_Sergius

Опубликовано сб, 17/12/2011 - 16:22 пользователем s_Sergius

wotti написал:
Подскажите как сделать центровку графических вложений?

Открыл одну книгу и офигел: картинки по центру. Хотя и не все.
Потом вспомнил. Я в ней в качестве эксперимента вензеля между разделами поместил так:
<subtitle><image l:href="#i_001.jpg"/></subtitle>

Так эти картиночки теперь прекрасно центруются. Как и положено subtitle.

А как со стандартными картинками быть? Не знаю. Но уверен, что знающие люди найдутся.

Опубликовано сб, 17/12/2011 - 18:07 пользователем antonius1980

Посмотрел код насчет центрирования графики, - там совсем просто не получится.
Картинки слишком по разному вставлены в книгу.
Как я вижу, обсуждаемый пользовательский css, добавляется последним в head секцию и влияет на всю страницу, в шаблоне для чтения.
Для этой книги http://lib.rus.ec/b/266299/read наиболее универсальным, ИМХО, будет следующий код:

div.clear-block img {margin:10px auto;display:block; }
div.clear-block p img {margin:0;display:inline; }

Первое правило центрирует все картинки, а второе возвращает на место буквицы.
А вот как оно будет работать в других книгах, зависит от форматирования.

Аватар пользователя Isais

Опубликовано вс, 18/12/2011 - 02:22 пользователем Isais

s_Sergius написал:
Открыл одну книгу и офигел: картинки по центру. Хотя и не все.
Потом вспомнил. Я в ней в качестве эксперимента вензеля между разделами поместил так:
<subtitle><image l:href="#i_001.jpg"/></subtitle>

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

Опубликовано сб, 17/12/2011 - 13:49 пользователем wotti

хотел сделать блочную цитату - не показывает. что не так?

blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}
Аватар пользователя s_Sergius

Опубликовано сб, 17/12/2011 - 14:10 пользователем s_Sergius

А что за .style2 ? Кто его должен показывать?

Вот обычная цитата из кода со страницы чтения /read:

<blockquote class="cite">
  <p class="book" data-n="170">Иже и свято, взойдяше на холмы, подаше книге Воздухе…</p>
</blockquote>

Если переопределить blockquote.cite, то цитата будет выглядеть по-своему. А где используется style2?

Опубликовано сб, 17/12/2011 - 14:22 пользователем wotti

s_Sergius написал:
А что за .style2 ? Кто его должен показывать?

Вот обычная цитата из кода со страницы чтения /read:

<blockquote class="cite">
  <p class="book" data-n="170">Иже и свято, взойдяше на холмы, подаше книге Воздухе…</p>
</blockquote>

Если переопределить blockquote.cite, то цитата будет выглядеть по-своему. А где используется style2?

блин. это жеж его нужно назначить..

Опубликовано сб, 17/12/2011 - 15:45 пользователем golma1

Ой, а я сдуру решила, что моих скромных познаний в css хватит, чтобы попробовать свои силы.
А тут такие тонкости.

Спасибо знатокам.

Аватар пользователя s_Sergius

Опубликовано вт, 20/12/2011 - 20:06 пользователем s_Sergius

Прошу оценить наборчик:

<style>
BODY { text-align : justify }
p.book {text-indent: 30px;  margin-bottom: 0pt; margin-top: 0pt; text-align : justify; }

H1.book { font-size : 160%; font-style : normal; font-weight : bold; text-align : right; } /* Book title */
H1.title{ font-size : 160%; font-style : normal; font-weight : bold; text-align : right; } /* Book title */

H2.book { font-size : 100%; font-style : normal; font-weight : bold; text-align : center; } /* Author, не используется */

H3.book { font-size : 150%; font-style : normal; font-weight : bold; text-align : center; padding-top : 12px; padding-bottom : 3px;} /* Title */
H3.title{ font-size : 150%; font-style : normal; font-weight : bold; text-align : center; padding-top : 12px; padding-bottom : 3px;} /* Title */

H5.book    { font-size : 110%; font-weight : bold; text-align : center; padding-top : 9px; } /* SubTitle */
H5.subtitle{ font-size : 110%; font-weight : bold; text-align : center; padding-top : 9px; } /* SubTitle */

BLOCKQUOTE { margin : 0.2em 4em 0.2em 4em }
DIV.book { text-align : left }
DIV.poem { margin-right : 25%; margin-left : 33%; margin-bottom : 0.8em; margin-top : 0.8em; }
DIV.stanza { margin: 0.8em 0}
BLOCKQUOTE.cite { margin-bottom : 0.2em; margin-top : 0.2em; }
BLOCKQUOTE.epigraph {margin-right : 5em; margin-left : 50%;}
BLOCKQUOTE.text-author { text-align : right; margin-right : 10%; margin-bottom : 0.3em; }
</style>

Заголовки и подзаголовки по центру, стихи тоже смещены к центру, а эпиграфы на правую половину.
Wotti, убери первый вариант, пожалуйста.

Опубликовано ср, 21/12/2011 - 03:21 пользователем golma1

s_Sergius написал:
Прошу оценить наборчик:

Очень нравится.
Спасибо.

Опубликовано ср, 21/12/2011 - 05:25 пользователем Алексей_Н

Спасибо! Очень симпатично.
А нельзя ли как-нибудь сделать так, чтобы в самом начале автор и название произведения писались в разных строчках, а не в одной, как это происходит сейчас?

Аватар пользователя s_Sergius

Опубликовано ср, 21/12/2011 - 06:00 пользователем s_Sergius

Алексей_Н написал:
А нельзя ли как-нибудь сделать так, чтобы в самом начале автор и название произведения писались в разных строчках, а не в одной, как это происходит сейчас?

Это к Илье.
Тут настройкой стилей не обойтись.
Так сделано в html-коде. Между первой и второй строками нет тега <br>, как между остальными.

Ну а пока, если это важно, можно делать в fb2 три строки:

• Имя [+Отчество] автора
• Фамилия
• Название книги
Это будет отображаться нормально.

upd.
Или так:

• Имя [+Отчество] Фамилия
• пустая строка
• Название книги

Опубликовано вс, 25/12/2011 - 15:39 пользователем larin

Я вообще автора и название не вывожу.
Но оно часто встречается в фб2, внутри body.
Зачем - не понимаю.
Верстальщики такие верстальщики.
В принципе можно попытаться выкусывать.

Аватар пользователя s_Sergius

Опубликовано вс, 25/12/2011 - 16:23 пользователем s_Sergius

larin написал:
Я вообще автора и название не вывожу.
Но оно часто встречается в фб2, внутри body.
Зачем - не понимаю.
Верстальщики такие верстальщики.
В принципе можно попытаться выкусывать.

Речь идет вот о чем.
В начале fb2 часто идет многострочный title c автором/ми и названием книги. Нужно это или нет, другой вопрос.
Так вот, первая и вторая строка всегда выводятся объединенно. А остальные нормально.
Например в http://lib.rus.ec/b/346079 сам fb2 содержит
Светлана Бестужева-Лада
ТУРЕЦКИЕ СТРАСТИ,
или
Сказка для девушек внешкольного возраста
без комплексов
а в библиотеке отображается:
Светлана Бестужева-Лада ТУРЕЦКИЕ СТРАСТИ,
или
Сказка для девушек внешкольного возраста
без комплексов

Ничего особенного делать и не нужно. Достаточно того, чтобы в генерируемом в html-коде между первой и второй строками тоже стоял тег <br/>, как и между остальными. А сейчас его нет, почему-то.
<h3 class="title">
  <span data-n="5" class="p">Светлана Бестужева-Лада</span>
  <span data-n="6" class="p">ТУРЕЦКИЕ СТРАСТИ,</span>
    <br/>
  <span data-n="7" class="p">или</span>
    <br/>
  <span data-n="8" class="p">Сказка для девушек внешкольного возраста</span>
    <br/>
   <span data-n="9" class="p">без комплексов</span>
</h3>

Опубликовано вс, 25/12/2011 - 18:08 пользователем larin

А зачем вообще шарашить метаинформацию внутрь body?
Для автора и названия книги есть своё место, и это отнюдь не title.

Аватар пользователя s_Sergius

Опубликовано вс, 25/12/2011 - 18:40 пользователем s_Sergius

larin написал:
А зачем вообще шарашить метаинформацию внутрь body?
Для автора и названия книги есть своё место, и это отнюдь не title.

Да кто его знает? Так исторически сложилось. И такой многострочный title (обычно в 2 строки) есть у подавляющего большинства книг. У более, чем 99% — точно. Да и не так важно, что в них содержится, в общем-то. Просто объединение первых двух строк в одну выглядит нелогично и некрасиво. Хотя это ни на что и не влияет, конечно.

Опубликовано пн, 26/12/2011 - 03:46 пользователем golma1

larin написал:
А зачем вообще шарашить метаинформацию внутрь body?
Для автора и названия книги есть своё место, и это отнюдь не title.

Не надо обобщать.
Есть масса книг, в которых сначала идёт "Об авторе", "Отзывы в прессе", "Предисловие", а только потом уже сам текст книги, перед которым обязательно должно быть ещё раз её название.

А в других случаях, как правильно сказал s_Sergius, - исторически сложилось. Предполагаю дело в том, что при открытии файла в редакторе названия не видно. Это неэстетично.

Опубликовано пн, 26/12/2011 - 04:31 пользователем Рыжий Тигра

larin написал:
Для автора и названия книги есть своё место, и это отнюдь не title.
А вот Х его З, почему так повелось, и мне это нравится. Книга на ридере должна начинаться с какого-то title'а хотя бы для того, чтобы начиналась с новой страницы, а не текст сразу впритык к аннотации. Опять же, если есть титулка-рисунок, то его хорошо ложить в body перед title, а не в первой секции: http://lib.rus.ec/b/184697
Кстати, а можно (настройкой в CSS или ещё как) в /b/NNNNN/read перед текстом вывести что-то из description'а - аннотацию, history, ещё что?

Опубликовано пн, 26/12/2011 - 05:03 пользователем golma1

Рыжий Тигра написал:
. Книга на ридере должна начинаться с какого-то title'а хотя бы для того, чтобы начиналась с новой страницы, а не текст сразу впритык к аннотации.

Добавлю, что БЕЗ заглавия в боди содержание в читалке выглядит так:

С заглавием мне нравится больше:

Опубликовано ср, 21/12/2011 - 15:43 пользователем Рыжий Тигра

(кто о чём, а вшивый о бабах бане) А можно заодно как-то подключить встроенные в .fb2-книгу стили / stylesheet?

Опубликовано вс, 25/12/2011 - 18:06 пользователем larin

Рыжий Тигра написал:
(кто о чём, а вшивый о бабах бане) А можно заодно как-то подключить встроенные в .fb2-книгу стили / stylesheet?

можно.

Опубликовано пн, 26/12/2011 - 04:36 пользователем Рыжий Тигра

larin написал:
Рыжий Тигра написал:
А можно заодно как-то подключить встроенные в .fb2-книгу стили / stylesheet?

можно.
Ага. Но тогда stylesheet придётся транслировать из FB2'шного в HTML'ский. Тогда вопрос номер два: а можно в http://lib.rus.ec/polka/css подсовывать именно FB2'шный CSS (из настроек CoolReader'а, например)? И/или хотя бы на той же страничке подсказкой дать список - какие FB2'шные тэги транслируются в какие HTML'ные? Очень бы облегчило настройку.
И вопрос номер следующий: сделать "библиотечку стилей" - чтобы каждый сделавший CSS мог поделиться им с остальными?

Опубликовано пн, 26/12/2011 - 13:22 пользователем golma1

update

На странице http://lib.rus.ec/polka/css появилась возможность выбрать уже готовые варианты стилей.

Опубликовано пн, 26/12/2011 - 13:55 пользователем wotti

Если первую строчку в видоизменить так:
BODY {text-align : justify; background-color: #E2E2E2; }
то цвет фона изменится на серый. Цвет можно поменять: подчёркнутое значение на любое по вашему вкусу. Коды цветов можно взять отсюда http://grafik.offtopic.su/pages/proba

Аватар пользователя s_Sergius

Опубликовано пн, 26/12/2011 - 14:43 пользователем s_Sergius

wotti написал:
Если первую строчку в видоизменить так:
BODY {text-align : justify; background-color: #E2E2E2; }
то цвет фона изменится на серый. Цвет можно поменять: подчёркнутое значение на любое по вашему вкусу. Коды цветов можно взять отсюда http://grafik.offtopic.su/pages/proba

Мне кажется, что цвета гораздо проще задавать в таком виде:
color: rgb(0,64,64);
или
background: rgb(255,240,225);

Так не надо морочиться с шестнадцатеричными значениями. А RGB-значения можно брать как по wotti’ной ссылке: http://grafik.offtopic.su/pages/proba, так и из любого другого источника, где цвет задается в RGB-модели.
Аватар пользователя s_Sergius

Опубликовано вт, 27/12/2011 - 17:37 пользователем s_Sergius

wotti написал:
Если первую строчку в видоизменить так:
BODY {text-align : justify; background-color: #E2E2E2; }
то цвет фона изменится на серый. Цвет можно поменять...

У меня это не срабатывает в теме bluebreeze. А в других — вполне.
Аватар пользователя s_Sergius

Опубликовано вт, 27/12/2011 - 18:42 пользователем s_Sergius

Я тут еще немного пошаманил. Вот результат:

/* Основной текст */
BODY { text-align : justify }
p.book {text-indent: 30px;  margin-bottom: 0pt; margin-top: 0pt; text-align : justify; }
/* Title */
H3.book, H3.title { font-size : 160%; font-style : normal; font-weight : normal; text-align : center; padding-top : 8px; padding-bottom : 4px; margin: 2px; }
/* Subtitle */
H5.book, H5.subtitle { font-size : 110%; font-weight : normal; text-align : center; padding-top : 6px; padding-bottom : 3px; margin: 2px 30px; }
/* Poem */
DIV.book { text-align : left }
DIV.poem { padding : 6px; margin-right : 30%; margin-left : 30%; }
DIV.stanza { margin: 0.5em 1em }
/* Cite & Epigraph */
BLOCKQUOTE { padding : 5px 10px; font-style: normal; margin : 0.2em 2.5em 0.2em 2.5em }
BLOCKQUOTE.epigraph { padding : 5px 10px; margin-right : 2em; margin-left : 50%;}
BLOCKQUOTE.epigraph DIV.poem { margin-right : 20%; margin-left : 20%; }
/* Text-author */
BLOCKQUOTE.text-author, DIV.poem BLOCKQUOTE.book, BLOCKQUOTE.book BLOCKQUOTE.book, BLOCKQUOTE.epigraph BLOCKQUOTE.book  { text-align : right; margin-right : 5%; }


/* Цвета и рамки */
BODY { background: rgb(255,250,240); }
H3.book, H3.title    { background: rgb(245,240,255); }
H5.book, H5.subtitle { background: rgb(255,240,240); }
BLOCKQUOTE { background: rgb(250,250,250); border: 2px ridge LightSteelBlue; }
BLOCKQUOTE.cite     { color: rgb(0,64,64); }
BLOCKQUOTE.epigraph { color: rgb(0,0,64); }
BLOCKQUOTE.text-author, BLOCKQUOTE.book BLOCKQUOTE.book, BLOCKQUOTE.epigraph BLOCKQUOTE.book { border: none; color: rgb(128,0,64); }
DIV.poem { color: rgb(64,0,0); background: rgb(245,245,245); }
DIV.poem BLOCKQUOTE.text-author, DIV.poem BLOCKQUOTE.book { border: none; color: rgb(128,0,64); background: rgb(245,245,245); }
i{ color: rgb(0,100,0); }
b{ color: rgb(0,0,100); }

Задействовал чуток цвета и рамки. Так как на цвет вообще «товарищей нет», то эти параметры собраны отдельно. Можно настроить их по-своему или просто выкинуть.

Делалось всё для темы bluemarine, но и в bluebreeze, chameleon, garland, marvin, pushbutton тоже работает.
В темах же Simulacrum и minelli, где область чтения и так заужена до безобразия, для стихов может оказаться маловато места, поэтому строки

DIV.poem { padding : 6px; margin-right : 30%; margin-left : 30%; }
и
BLOCKQUOTE.epigraph DIV.poem { margin-right : 20%; margin-left : 20%; }
можно подкорректировать в сторону уменьшения отступов справа/слева.

Проверять удобно на тестовом файле, добавленном сегодня: http://lib.rus.ec/b/348013/read

Опубликовано ср, 28/12/2011 - 09:03 пользователем wotti

КАК ЦЕНТРОВАТЬ КАРТИНКИ!!!! )))
Я тоже немного шлифую, скоро выложу (как с картинками разберусь)

Аватар пользователя s_Sergius

Опубликовано ср, 28/12/2011 - 13:04 пользователем s_Sergius

wotti написал:
КАК ЦЕНТРОВАТЬ КАРТИНКИ!!!! )))

Тем способом, что написал antonius1980, у меня картинки центрироваться никак не хотели, но если долго мучиться...

Вот эти строки:

img{ margin-right: auto; margin-left: auto; display: block; }
p img, h5 img { margin: 0; display:inline; }
делают так, что обычные картинки встают по центру, inline’вые остаются на своем месте в строке, а subtitle’вые выравниваются так, как задано в subtitle (h5).

Получается примерно так:

Опубликовано ср, 28/12/2011 - 15:46 пользователем wotti

s_Sergius написал:

Получается примерно так:


!!!!!!

Я добавил подчёркивание субтайтлов и чуть-чуть увеличил расстояние между абзацами, ну и шрифты переназначил:

УПД. Обратил внимание - тебе есть смысл ин-лайны (буквицы) делать в два цвета и на прозрачном фоне

Аватар пользователя s_Sergius

Опубликовано ср, 28/12/2011 - 17:31 пользователем s_Sergius

wotti написал:
УПД. Обратил внимание - тебе есть смысл ин-лайны (буквицы) делать в два цвета и на прозрачном фоне
Пожалуй, да.

А хорошо ли, когда у тебя текст стихов выравнивается по центру?
В некоторых книгах левые отступы играют немаловажную роль, например: http://lib.rus.ec/b/344250/read#t3, а при таком центрировании получится нечто невразумительное.

Опубликовано ср, 28/12/2011 - 22:55 пользователем wotti

s_Sergius написал:
wotti написал:
УПД. Обратил внимание - тебе есть смысл ин-лайны (буквицы) делать в два цвета и на прозрачном фоне
Пожалуй, да.

А хорошо ли, когда у тебя текст стихов выравнивается по центру?
В некоторых книгах левые отступы играют немаловажную роль, например: http://lib.rus.ec/b/344250/read#t3, а при таком центрировании получится нечто невразумительное.

Может быть.. Пробую я. Ищу оптимум

Опубликовано чт, 29/12/2011 - 05:03 пользователем Рыжий Тигра

Народ, поделитесь табличкой соответствия тэгов в FB2 и HTML! И/или готовым компилятором FB2'шного CSS в HTML'ский, буде таковой существует в природе. Хочу добавить свой fb2.css - выстраданный многолетними экспериментами и оплаченный двумя расколошмаченными e-ink'овыми экранами, - но не знаю как! Да и править чей-то готовый... э... напряжно. :-(

Опубликовано чт, 29/12/2011 - 10:25 пользователем larin

Рыжий Тигра написал:
Народ, поделитесь табличкой соответствия тэгов в FB2 и HTML! И/или готовым компилятором FB2'шного CSS в HTML'ский, буде таковой существует в природе. Хочу добавить свой fb2.css - выстраданный многолетними экспериментами и оплаченный двумя расколошмаченными e-ink'овыми экранами, - но не знаю как! Да и править чей-то готовый... э... напряжно. :-(

Такого соответсвия пока нет.
К концу года постараюсь доделать.
X