Thread: (sigh), Kindle/KPF format Blues...
View Single Post
Old 11-05-2019, 08:22 PM   #83
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 80,009
Karma: 147977995
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by Tex2002ans View Post
For a book club I'm in, I recently got an ebook that was formatted in the "amazing" Vellum. The code looks... not great:

Spoiler:
Code:
<body id="5N3C0-abc04c2609aa446198d6cd8a412fa940">
<div id="chapter-001" class="title-page-contributor-primary-block"><header class="heading" id="chapter-001-heading">
<div class="title-subtitle-block">
<div class="element-number-block"><h2 class="element-number1">1</h2>
</div>
<div class="title-page-contributor-primary-block">
<h3 class="title1">The Power of Reinvention</h3>
</div>
</div>

</header>
<div class="title-page-contributor-primary-block" id="chapter-001-text">
<p class="first"><span><span class="first-letter1">I</span>n many ancient societies</span>, the Phoenix was a symbol of strength and rebirth.</p>
<p><span><span>I</span>t lived</span> for hundreds of years at a time. When it started to feel weak, it would arrange a stake for itself and burst into flames.</p>
<p><span><span>A</span>fter being consumed</span> by the fire, the Phoenix rose from [...]
<p><span><span>Y</span>ou </span><i><span>think </span></i><span>you’re a “professional</span>,” a working stiff, a failure, destined for mediocrity, or one of the endless labels we attach ourselves to.</p>
[...]
<p><b class="vellum"><span><span>I</span> Won’t Operate</span> in Should or Must</b> <span><span>P</span>erception is powerful</span>. Even though our individual perceptions <i class="calibre7">seem </i>like reality, they’re not. They’re just our own versions of what’s real.</p>


with a bunch of hideous CSS (that would definitely break/not work in many readers):

Spoiler:
Code:
[...]
.connect-block {
    display: block;
    margin-top: 1em;
    text-align: center
    }
.connect-item {
    -webkit-hyphens: auto;
    adobe-hyphenate: auto;
    display: block;
    font-size: 0.75em;
    height: 1.75em;
    hyphens: auto;
    text-align: justify;
    text-indent: 0;
    margin: 0 0 0.25em
    }
.connect-item1 {
    -webkit-hyphens: auto;
    adobe-hyphenate: auto;
    display: block;
    font-size: 0.75em;
    hyphens: auto;
    text-align: center;
    text-indent: 0;
    margin: 0 0 0.25em
    }
.connect-oldschool-block {
    display: block;
    margin-bottom: 0;
    margin-top: 0.5em
    }
.content-external-link {
    color: rgb(93, 31, 52);
    text-decoration: underline
    }
.created-with-vellum {
    display: block;
    padding-top: 0.5em
    }
.created-with-vellum-image {
    height: 1em;
    width: auto
    }
.created-with-vellum-image-container {
    display: inline-block;
    float: left;
    height: 1em;
    margin-top: 0.05em;
    padding-right: 0.25em
    }
.element {
    display: block;
    margin-left: 8%;
    margin-right: 8%;
    text-align: center
    }
.element-number {
    display: inline-block;
    font-size: 0.75em;
    min-width: 1.5em;
    padding-left: 0;
    text-indent: 0
    }
.element-number-block {
    display: block;
    min-height: 2em
    }
.element-number1 {
    -webkit-font-kerning: auto;
    -webkit-hyphens: manual;
    adobe-hyphenate: none;
    display: inline-block;
    font-family: Palatino, Malabar, serif;
    font-size: 0.75em;
    font-weight: bold;
    hyphens: manual;
    min-width: 4em;
    padding-bottom: 0.4em;
    page-break-after: avoid;
    page-break-inside: avoid;
    text-align: center;
    margin: 0;
    border-bottom: rgb(111, 46, 46) solid 1px
    }
.element-title {
    -webkit-hyphens: none;
    adobe-hyphenate: none;
    display: block;
    hyphens: none;
    padding-left: 1.5em;
    text-align: left;
    text-indent: -1.5em;
    margin: 0
    }
.element1 {
    display: block;
    margin-top: 80px
    }
.element2 {
    display: block;
    margin-top: 10em
    }
.first {
    -webkit-hyphens: manual;
    adobe-hyphenate: none;
    display: block;
    font-size: 0.75em;
    hyphens: manual;
    text-align: left;
    text-indent: 0;
    margin: 0.75em 0 0
    }
.first-letter {
    -webkit-line-box-contain: block inline replaced;
    float: left;
    font-family: Baskerville, "Sorts Mill Goudy", Malabar, serif;
    font-size: 500%;
    font-style: normal;
    font-weight: normal;
    line-height: 120%;
    margin-bottom: -0.31em;
    margin-right: 0.1em;
    margin-top: -0.35em;
    text-decoration: none;
    text-transform: uppercase
    }
.first-letter1 {
    -webkit-line-box-contain: block inline replaced;
    float: left;
    font-family: Baskerville, "Sorts Mill Goudy", Malabar, serif;
    font-size: 500%;
    font-style: normal;
    font-weight: normal;
    line-height: 120%;
    margin-bottom: -0.31em;
    margin-right: 0.09em;
    margin-top: -0.35em;
    text-decoration: none;
    text-transform: uppercase
    }
.first-letter2 {
    -webkit-line-box-contain: block inline replaced;
    float: left;
    font-family: Baskerville, "Sorts Mill Goudy", Malabar, serif;
    font-size: 500%;
    font-style: normal;
    font-weight: normal;
    line-height: 120%;
    margin-bottom: -0.31em;
    margin-right: 0.05em;
    margin-top: -0.35em;
    text-decoration: none;
    text-transform: uppercase
    }
.first-letter3 {
    -webkit-line-box-contain: block inline replaced;
    float: left;
    font-family: Baskerville, "Sorts Mill Goudy", Malabar, serif;
    font-size: 500%;
    font-style: normal;
    font-weight: normal;
    line-height: 120%;
    margin-bottom: -0.31em;
    margin-right: 0.08em;
    margin-top: -0.35em;
    text-decoration: none;
    text-transform: uppercase
    }
.first1 {
    -webkit-hyphens: auto;
    adobe-hyphenate: auto;
    display: block;
    font-style: italic;
    hyphens: auto;
    text-align: center;
    text-indent: 0;
    margin: 0
    }
.first2 {
    -webkit-hyphens: auto;
    adobe-hyphenate: auto;
    display: block;
    font-size: 0.75em;
    hyphens: auto;
    text-align: justify;
    text-indent: 0;
    margin: 0
    }
.heading {
    min-height: 10.5em;
    text-align: center;
    margin: 60px 6% 2em
    }
.heading1 {
    min-height: 6em;
    text-align: center;
    margin: 64px 6% 2em
    }
.implicit-break {
    -webkit-hyphens: auto;
    adobe-hyphenate: auto;
    clear: both;
    display: block;
    font-size: 0.75em;
    height: 1.4em;
    hyphens: auto;
    page-break-inside: avoid;
    text-align: justify;
    text-indent: 0;
    margin: 0 0 1.4em
    }
.inline-image {
    clear: both;
    display: block;
    margin-bottom: 1.5em;
    margin-top: 1.5em;
    text-align: center;
    width: 100%
    }
.inline-image-container {
    display: block;
    margin-left: 32.5%;
    margin-right: 32.5%;
    width: 35%
    }
.social-icon-image {
    background-color: rgb(147, 147, 147);
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    height: 1.75em;
    margin-bottom: -0.5em;
    margin-right: 0.2em;
    width: 1.75em
    }
.social-link-block {
    display: inline-block;
    margin-bottom: 0;
    margin-top: 0.4em;
    text-align: left
    }
.subsq {
    -webkit-hyphens: auto;
    adobe-hyphenate: auto;
    display: block;
    hyphens: auto;
    text-align: justify;
    text-indent: 1.5em;
    margin: 0
    }
.title {
    -webkit-font-kerning: auto;
    -webkit-hyphens: manual;
    adobe-hyphenate: none;
    display: block;
    font-family: Palatino, Malabar, serif;
    font-size: 1em;
    font-weight: bold;
    hyphens: manual;
    page-break-after: avoid;
    page-break-inside: avoid;
    text-align: center;
    text-transform: uppercase;
    margin: 0.1em 0 0
    }
.title-page-contributor {
    -webkit-font-kerning: auto;
    -webkit-hyphens: manual;
    adobe-hyphenate: none;
    display: block;
    font-family: Palatino, Malabar, serif;
    font-size: 1.125em;
    font-weight: normal;
    hyphens: manual;
    line-height: 1.2;
    page-break-after: avoid;
    page-break-inside: avoid;
    text-align: center;
    margin: 0 0 0.5em
    }
.title-page-contributor-block {
    display: block;
    margin-bottom: 1.5em;
    min-height: 80px
    }
.title-page-contributor-name {
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase
    }
.title-page-contributor-primary-block {
    display: block
    }
.title-page-subtitle {
    -webkit-font-kerning: auto;
    -webkit-hyphens: manual;
    adobe-hyphenate: none;
    display: block;
    font-family: Palatino, Malabar, serif;
    font-size: 1em;
    font-weight: normal;
    hyphens: manual;
    page-break-after: avoid;
    page-break-inside: avoid;
    text-align: center;
    text-transform: uppercase;
    margin: 1.5em 0 0
    }
.title-page-title {
    -webkit-font-kerning: auto;
    -webkit-hyphens: manual;
    adobe-hyphenate: none;
    border-left-color: rgb(111, 46, 46);
    border-left-width: 1px;
    border-right-color: rgb(111, 46, 46);
    border-right-width: 1px;
    border-top-color: rgb(111, 46, 46);
    border-top-width: 1px;
    display: inline-block;
    font-family: Palatino, Malabar, serif;
    font-size: 1.41667em;
    font-weight: bold;
    hyphens: manual;
    letter-spacing: 0.03em;
    line-height: 1.4em;
    padding-bottom: 0.4em;
    page-break-after: avoid;
    page-break-inside: avoid;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    border-bottom: rgb(111, 46, 46) solid 1px
    }
.title-page-title-subtitle-block {
    display: block;
    margin-bottom: 2em;
    margin-top: 140px;
    min-height: 140px
    }
.title-subtitle-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
    min-height: 2em;
    padding-top: 3em;
    width: intrinsic
    }
.title-subtitle-block1 {
    display: block;
    min-height: 0;
    width: intrinsic;
    padding: 0;
    margin: 0 auto
    }
.title1 {
    -webkit-font-kerning: auto;
    -webkit-hyphens: manual;
    adobe-hyphenate: none;
    display: block;
    font-family: Palatino, Malabar, serif;
    font-size: 1em;
    font-weight: bold;
    hyphens: manual;
    page-break-after: avoid;
    page-break-inside: avoid;
    text-align: center;
    text-transform: uppercase;
    margin: 0.1em 0 0
    }
.toc-backmatter-group {
    display: block;
    margin-top: 0.5em
    }
.toc-frontmatter-group {
    display: block;
    margin-bottom: 0.5em
    }
.toc-title {
    -webkit-font-kerning: auto;
    -webkit-hyphens: manual;
    adobe-hyphenate: none;
    border-left-color: rgb(117, 117, 117);
    border-left-width: 1px;
    border-right-color: rgb(117, 117, 117);
    border-right-width: 1px;
    border-top-color: rgb(117, 117, 117);
    border-top-width: 1px;
    display: block;
    font-family: Palatino, Malabar, serif;
    font-size: 1em;
    font-weight: bold;
    hyphens: manual;
    padding-bottom: 0.7em;
    page-break-after: avoid;
    page-break-inside: avoid;
    text-align: center;
    text-transform: uppercase;
    margin: 0.5em 0 16px;
    border-bottom: rgb(117, 117, 117) solid 1px
    }
.underline {
    text-decoration: underline
    }
.vellum {
    font-weight: bold
    }
That is some really nasty code. Why bother to use a program to help create your eBook when you'll only need to redo it all by hand and it will be much more difficult to fix this mess then to do it all by hand.

For the average novel, HTML/CSS is very easy to learn. We have Calibre and Sigil that will let you create your eBook as long as you know enough HTML/CSS. I learned a lot from diving into eBook code. It started with Book designer and then ePub using Notepad++. Then I moved to Sigil. Now it's mostly Calibre with sometimes Sigil. I probably would still be using Sigil mostly if it wasn't for book view. I found it annoying to have to keep switching between book view and code view. Calibre I didn't need to do that. So I just got to using it more and more.
JSWolf is offline   Reply With Quote