- 23, Oct 2024
- #1
Если я создаю файл ePub вручную, с нуля (следуя такому рецепту, как изложено в этом вопросе), как мне добавить изображения в файл? В частности, нужно ли мне что-то особенное сделать для обложки?
#epub #творение #производство
Если я создаю файл ePub вручную, с нуля (следуя такому рецепту, как изложено в этом вопросе), как мне добавить изображения в файл? В частности, нужно ли мне что-то особенное сделать для обложки?
#epub #творение #производство
Изображения в целом следует добавлять так же, как в HTML, с
tag. The image files themselves should then be included in the OEBPS folder or a subfolder (I generally use a subfolder, personally). Each image file will need to be declared in the<spine toc="ncx"> <itemref idref="cover.xhtml"/> </spine>
<guide>
<reference type="cover" title="Кувертюр" href="Text/cover.xhtml"/>
</guide>
раздел файла content.opf. Как упоминалось в Технические характеристики epub 3.0, изображение обложки, в частности, также должно иметь <meta name="cover" content="обложка.png" />
property assigned to it in the <metadata>.... </metadata> , вот так:
<item id="cover.xhtml" href="Text/cover.xhtml" media-type="application/xhtml+xml"/>
<manifest> entry for non-cover images is the same, just without the <item id="cover.png" href="Images/cover.png" media-type="image/png"/>
кусочек.
Это все, что касается обычного epub, но некоторые розничные продавцы также могут попросить <manifest> element in the <item href="cover.jpg" id="cover-image" media-type="image/jpeg" **properties="cover-image"**/>
раздел файла content.opf, объявляющий обложку, например так (из Руководства по публикации Amazon Kindle):
<item href="cover.jpg" id="cover-image" media-type="image/jpeg" />
Обратите внимание, что Amazon, в частности, больше не требует <manifest>... </manifest> bit as long as the <body class="fullpage">
<section class="cover" **epub:type="cover"**>
<img id="coverimage" src="images/cover.jpg" alt="обложка" />
</section>
</body>
правильно объявлено.
Я предлагаю вам использовать Sigil или другое программное обеспечение для создания электронных книг.
Не начинайте с нуля с помощью файла .html, это сложнее, начните с нуля с помощью программного обеспечения. Я могу перечислить то, что вы можете получить с помощью такого программного обеспечения, что вы получите автоматически, и что вы не сможете получить с помощью неспециализированного программного обеспечения.
И будьте осторожны, если вы используете текстовый процессор или специализированное программное обеспечение: они содержат много кода, несовместимого с форматами электронных книг. Вам придется все исправить, просмотрев весь код самостоятельно, поэтому делать это не рекомендуется.
Во-первых, рекомендуется вставлять обложку в качестве первой страницы .xhtml в вашу электронную книгу.
Хорошая обложка книги должна:
Позволяет читать четко, даже если изображение маленькое.
Amazon, например, говорит:
Изображение обложки должно быть меньше 50 МБ. Старайтесь избегать сжатия
файлы. Это может повлиять на качество вашей обложки при отображении на
-
разрешение 300 PPI (пикселей на дюйм).
И:
Идеальный размер обложки вашей электронной книги — это соотношение высоты и ширины
1,6:1. Это означает, что на каждые 1000 пикселей по ширине изображение должно иметь высоту 1600 пикселей. Чтобы обеспечить лучшее качество для вашего
<body class="fullpage">
<div class="cover">
<img id="coverimage" src="images/cover.jpg" alt="обложка" />
</div>
</body>
body.fullpage {
margin: 0;
padding: 0;
}
section.cover {
display: block;
text-align: center;
height: 95%;
}
img#coverimage {
height: 95%;
}
img#coverimage:only-of-type { /*overrides the previous setting, but only in newer systems that support CSS3 */
height: 95vh;
}
section.cover {
display: block;
text-align: center;
}
div.cover {
text-align: center;
}
body.fullpage {
margin: 0;
padding: 0;
}
.cover{
background-color: grey;
text-align: center;
padding: 0pt;
margin: 0pt;
page-break-after: always;
text-indent: 0;
width: 100%;
height: 100%;
}
body.fullpage {
margin: 0;
padding: 0;
}
изображение должно быть не менее 2500 пикселей. Идеальные размеры чехла
файлы имеют размер 2560 x 1600 пикселей.Примечание. Минимальный разрешенный размер изображения — 1000 x 625 пикселей. Максимально допустимый размер изображения — 10 000 x 10 000 пикселей.
Например, Sigil автоматически включает изображение обложки в обертку.
Преимущество заключается в том, что файлы .SVG имеют небольшой размер и очень хорошо изменяются, не теряя четкости. Цель состоит в том, чтобы размер обложки автоматически изменялся в зависимости от экрана ридера, который может сильно отличаться от одного ридера к другому. https://ebookflightdeck.com/handbook/coverimage
Недостаток заключается в том, что некоторые программы чтения не поддерживают SVG (вы должны проверить, относится ли это к программе чтения, на которую вы ориентируетесь, я не знаю, какие из них, ссылка, которую я упомянул, говорит нам, что они существуют). Каждый раз можно, если это поддерживается, использовать скорее SVG и ничего больше.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover</title>
<link href="../Styles/cover.css" type="text/css" rel="stylesheet"/>
</head>
<body class="fullpage">
<div class="cover" id="cover">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1410 2250" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="coverimage" alt="обложка" width="1410" height="2250" xlink:href="../Images/cover.png"/>
</svg>
</div>
</body>
</html>
Создайте лист CSS для обложки. Назовите его Cover.css, это не обязательно, но будет понятнее и проще в управлении.
Итак, вставьте изображение в файл электронной книги с помощью программного обеспечения, нажмите «Добавить обложку», выберите изображение в качестве обложки (вы также можете щелкнуть правой кнопкой мыши по изображению, зайти в семантическое меню и выбрать обложку в качестве семантики, эти 2 способы могут превратить изображение в обложку)
Назовите файл .xhtml, созданный вашим программным обеспечением, как Cover.xhtml.
Затем свяжите файл Cover.css с файлом Cover.xhtml.
Чтобы сделать это вручную, в заголовке вашего .xtml-файла:
<link href="../Styles/cover.css" type="text/css" rel="stylesheet"/>
Это код .xhtml, сгенерированный Sigil для обложки моей книги, а это код всей страницы:
properties="cover-image"
Мой CSS-код в файле Cover.css:
Цвет фона не обязателен, мне так нравится.
Не забудьте <meta> section for Epub2:
<meta name="cover" content="изображения/обложка.jpg" />
добавить альтернативу
<metadata>
, как <meta> section too:
properties="cover-image"
альтернативный вариант <manifest> section too:
<item id="cover_jpg" properties="cover-image" href="images/cover.jpg" media-type="image/jpeg" />
тег улучшает доступность. <manifest> section, only for Epub2:
cover-image
Если программа чтения не поддерживает SVG, есть другое решение: вы заменяете код SVG на код для Epub2 с элементом div, который будет отображать обложку без рамки, всю страницу и т. д.
<manifest>
Источник:
Этот код CSS гарантирует, что обложка будет отображаться без полей на всю страницу. Для Epub2 и Epub3:
Этот CSS-код обеспечит центрирование обложки: http://www.rshelton.org/2014/11/how-to-understand-spine-and-guide-in.html
Для позвоночника это не обязательно. Только если вы хотите, чтобы ваше прикрытие было в оглавлении.
<img>
![[Мелинда Вуд] Графический дизайн. Онлайн курс-расти ваш интернет магазин Etsy (2018)](/assets/images/icons/forum1.png){kind=icon}
![[Олег Ефремов] Instagram для поэтов и писателей (2018)](/assets/images/icons/forum3.png){kind=icon}
![[Мария Солодар] Школа интернет-маркетологов, автоматические воронки продаж (2016)](/assets/images/icons/forum0.png){kind=icon}
