I'm noticing that whenever I download epubs with FFF vs directly from AO3, some of the formatting isn't retained. For example, some of the chapter text that's centered in the AO3 version is left-aligned when downloaded via FFF. I have a section in my personal.ini to configure the output css that I copied from a post in this thread, but I don't know enough about coding to figure out what exactly is causing the issue. Could someone help me out?
This is what I have in my personal.ini to configure the output css:
Code:
add_to_output_css:
img { max-width: 100%%; height: auto; }
body {
text-align: left;
font-family: 'Bookerly', serif;
}
body.fff_titlepage {
font-size: inherit;
font-family: 'Bookerly', serif;
background-color: #000000;
color: white;
}
hr {
display: block;
border: 0; border-top: 1px solid;
padding: 0;
}
.hr-sect {
display: flex;
flex-basis: 100%%;
align-items: center;
text-align: center;
margin: 5px 0px;
}
.hr-sect:before,
.hr-sect:after {
content: "";
flex-grow: 1;
height: 1px;
border: 0; border-top: 1px solid;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
.fff_titlepage .title h1,
.fff_titlepage .title h2 {
font-family: 'Bookerly', serif;
font-size: 3.5vmax;
margin: 0;
}
.fff_titlepage .title h1 { font-weight: normal; }
.fff_titlepage .title h1 a { font-weight: bold; }
.fff_titlepage .title a,
.fff_titlepage .tags a,
.fff_titlepage .tag-summary-content a {
text-decoration: none;
color: unset;
}
.fff_titlepage .tag-summary-content a {
font-style: italic;
}
.fff_titlepage .tag-summary-content p {
margin-top: 0;
}
.fff_titlepage .tags {
display: block;
padding: 0;
}
.fff_titlepage dl .inline dd {
display: inline;
margin: 0;
}
.fff_titlepage dl .inline dd:after {
display: block;
content: '';
}
.fff_titlepage dl .inline dt {
display: inline-block;
}
.fff_titlepage dd { margin-left: 0.75em; }
.fff_titlepage dl, .fff_titlepage dt { margin: 0; }
@media only screen and (max-device-width: 480px),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body.fff_titlepage { font-size: inherit; }
}
titlepage_start:<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>${title} by ${author}</title>
<link href="stylesheet.css" type="text/css" charset="UTF-8" rel="stylesheet"/>
<meta name="calibre-html-render-data" content='{"size": "A2", "margins": [0, 0, 0, 0]}'/>
</head>
<body class="fff_titlepage" style="font-size: inherit;">
<div class="title">
<h1><a href="${storyUrl}">${title}</a> by ${authorHTML}</h1>
<div class="hr-sect"> ✧ </div>
<dl class="tags">
## ${id}, ${label}, ${value}
titlepage_entry:
<dt><b>${label}:</b></dt> <dd>${value}</dd>
## ${id}, ${label}, ${value}
## Used with entries listed in wide_titlepage_entries, typically description, storyUrl, authorUrl
titlepage_wide_entry:
## When using tables, make these span both columns.
wide_titlepage_entries:
## ${id}, ${value}
## For example, if you've set description_label:
## (that is, nothing)
titlepage_no_title_entry:
## metadata
titlepage_end:
<div class="hr-sect"> ✧ </div>
</dl>
<dt><b>Summary:</b></dt>
<div class="tag-summary-content">${description}</div>
</div>
</body>
</html>