Answers.Body: <p>Add this css to Indesign (this should be a text file but I'm not going to go through it and add four spaces to each line)</p>
  
  <p>/*
  This document has been created with Marked.app <a href="http://markedapp.com" rel="nofollow noreferrer">http://markedapp.com</a>, Copyright 2011 Brett Terpstra</p>
  
  <h2>Please leave this notice in place, along with any additional credits below.</h2>
  
  <p>Title:  Manuscript
  Author:  Brett Terpstra
  Description:  Courier, Double-spaced
  */
  body {
    -webkit-font-smoothing: subpixel-antialiased;
    font: normal 1em/2.5em "Courier", monospace;
    margin: 4em 1in 1in 4em;
    width: auto; }</p>
  
  <p>html > body {
    font-size: 12pt; }</p>
  
  <p>h1 {
    text-align: center;
    font-size: 2.2857em;
    margin: .6563em 0; }</p>
  
  <p>h2 {
    font-size: 1.7143em;
    margin: .875em 0; }</p>
  
  <p>h3 {
    text-align: center;
    font-size: 1.5em;
    margin: 1em 0; }</p>
  
  <p>h4 {
    font-size: 1.2857em;
    margin: 1.1667em 0; }</p>
  
  <p>h5 {
    font-size: 1.15em;
    margin: 1.3em 0; }</p>
  
  <p>h6 {
    font-size: 1em;
    margin: 1.5em 0; }</p>
  
  <p>body, p, td, div {
    color: #111111;
    font-family: "Courier", monospace;
    word-wrap: break-word; }</p>
  
  <p>h1, h2, h3, h4, h5, h6 {
    color: #111111;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5em; }</p>
  
  <p>a {
    color: #0d6ea1;
    text-decoration: none;
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out; }
    a:hover {
      color: #3593d9; }</p>
  
  <p>.footnote {
    color: #0d6ea1;
    font-size: .8em;
    vertical-align: super; }</p>
  
  <h1>wrapper img {</h1>
  
  <p>max-width: 100%;
    height: auto; }</p>
  
  <p>dd {
    margin-bottom: 1em; }</p>
  
  <p>li > p:first-child {
    margin: 0; }</p>
  
  <p>ul ul, ul ol {
    margin-bottom: .4em; }</p>
  
  <p>caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr {
    border-spacing: 0; }</p>
  
  <p>table {
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-collapse: collapse;
    display: table;
    empty-cells: hide;
    margin: -1px 0 23px;
    padding: 0;
    table-layout: fixed; }</p>
  
  <p>caption {
    display: table-caption;
    font-weight: 700; }</p>
  
  <p>col {
    display: table-column; }</p>
  
  <p>colgroup {
    display: table-column-group; }</p>
  
  <p>tbody {
    display: table-row-group; }</p>
  
  <p>tfoot {
    display: table-footer-group; }</p>
  
  <p>thead {
    display: table-header-group; }</p>
  
  <p>td, th {
    display: table-cell; }</p>
  
  <p>tr {
    display: table-row; }</p>
  
  <p>table th, table td {
    padding: 0 1em; }</p>
  
  <p>table thead {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2); }</p>
  
  <p>table tbody {
    background: rgba(0, 0, 0, 0.05); }</p>
  
  <p>table tfoot {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(0, 0, 0, 0.2); }</p>
  
  <p>figure {
    display: inline-block;
    position: relative;
    margin: 1em 0 2em; }</p>
  
  <p>figcaption {
    font-style: italic;
    text-align: center;
    background: white;
    color: #666666;
    position: absolute;
    left: 0;
    bottom: -24px;
    width: 98%;
    padding: 1%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }</p>
  
  <p>figure:hover > figcaption {
    /* background: rgba(0,0,0,1) */ }</p>
  
  <p>.poetry pre {
    display: block;
    font-family: Georgia, Garamond, serif !important;
    font-style: italic;
    margin-left: 1em; }
    .poetry pre code {
      font-family: Georgia, Garamond, serif !important;
      word-break: break-all;
      word-break: break-word;
      /* Non standard for webkit */
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      hyphens: auto;
      white-space: pre-wrap; }</p>
  
  <p>blockquote p {
    text-indent: 0;
    font-style: italic; }</p>
  
  <p>sup, sub, a.footnote {
    font-size: 1.4ex;
    height: 0;
    line-height: 1;
    position: relative;
    vertical-align: super; }</p>
  
  <p>sub {
    vertical-align: sub;
    top: -1px; }</p>
  
  <p>blockquote+p {
    margin: 0; 
    text-indent: 0;
    }</p>
  
  <p>h2+p {
    margin: 0; 
    text-indent: 0;
    }</p>
  
  <p>p, h5 {
    margin: 0; 
    text-indent: 1.5em;
    }</p>
  
  <p>dt, th {
    font-weight: 700; }</p>
  
  <p>table tr:nth-child(odd), table th:nth-child(odd), table td:nth-child(odd) {
    background: rgba(255, 255, 255, 0.06); }</p>
  
  <p>table tr:nth-child(even), table td:nth-child(even) {
    background: rgba(200, 200, 200, 0.25); }</p>
  
  <p>@media print {
    body {
      overflow: auto; }</p>
  
  <p>img, pre, blockquote, table, figure {
      page-break-inside: avoid; }</p>
  
  <p>p {
      page-break-inside: auto; }</p>
  
  <p>#wrapper {
      background: white;
      color: #303030;
      padding: 10px;
      position: relative;
      text-indent: 0; } }
  @media screen {
    .inverted {
      background: #252a2a; }
      .inverted #wrapper {
        background: #252a2a; }
      .inverted hr {
        border-color: #333f40 !important; }
      .inverted p, .inverted td, .inverted li, .inverted h1, .inverted h2, .inverted h3, .inverted h4, .inverted h5, .inverted h6, .inverted pre, .inverted code, .inverted th, .inverted .math, .inverted caption, .inverted dt, .inverted dd {
        color: #eeeeee; }
      .inverted table {
        background: none; }
        .inverted table tr:nth-child(odd), .inverted table td:nth-child(odd) {
          background: none; }
      .inverted a {
        color: #acd1d5; }</p>
  
  <p>::selection {
      background: rgba(157, 193, 200, 0.5); }</p>
  
  <p>h1::selection {
      background-color: rgba(45, 156, 208, 0.3); }</p>
  
  <p>h2::selection {
      background-color: rgba(90, 182, 224, 0.3); }</p>
  
  <p>h3::selection, h4::selection, h5::selection, h6::selection, li::selection, ol::selection {
      background-color: rgba(133, 201, 232, 0.3); }</p>
  
  <p>code::selection {
      background-color: rgba(0, 0, 0, 0.7);
      color: #eee; }</p>
  
  <p>code span::selection {
      background-color: rgba(0, 0, 0, 0.7) !important;
      color: #eee !important; }</p>
  
  <p>a::selection {
      background-color: rgba(255, 230, 102, 0.2); }</p>
  
  <p>.inverted a::selection {
      background-color: rgba(255, 230, 102, 0.6); }</p>
  
  <p>td::selection, th::selection, caption::selection {
      background-color: rgba(180, 237, 95, 0.5); } }</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-20T10:53:16.720Z
Answers.Text: Thank you for the code, I added as provided. It is just perfect! Is there any chance, I can also add the author name in the code? Also, I have only one, cover image but it is broken in half. Any idea how to solve this?
Answers.UserDisplayName: Joanna
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-20T19:29:35.217Z
Answers.Text: You can leave the author's name in the code by commenting out the lines as you would do when writing any html code: <-- text you want to comment out -->  My experience with e-readers is that different programs yield different results when trying to display the cover page. I don't know which dimensions work universally. I think that BBeBooks blog might have further information. http://bbebooksthailand.com
Answers.UserDisplayName: user26732
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-21T06:56:59.753Z
Answers.Text: Thank you very much for all help! I have found one solution for the author is to add it in Metadata in export options in InDesign. Also, I removed all images and it is possible to add cover by uploading it in InDesign export options as well. Thank you!
Answers.UserDisplayName: Joanna
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-22T07:25:46.777Z
Answers.Text: The author who wrote the css should not be named as the author of the book itself in the epub's metadata. But if there's a place other than that reserved for the book's author, fine.
Answers.UserDisplayName: user26732
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-23T08:11:37.600Z
Answers.Text: Unfortunately, from InDesign that seems like the only way. In iBooks it displays as an author name.
Answers.UserDisplayName: Joanna
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-14T17:55:40.660Z
Answers.LastActivityDate: 2017-08-14T17:55:40.660Z
Answers.UserDisplayName: user26732
Answers.Body: <p>The main advantage of Indesign is that it lets you publish a print version which can also be exported to an ebook format. </p>
  
  <p>For ebook design you must deal with the limitations of reading systems --especially that of Kindle. </p>
  
  <p>As a first step, it might help to have direct access to the devices you want to design for which you can use for testing. For me, I use  a 3 year old Kindle, a recent iphone, an older iPad, an android tablet (and various reading software on these devices). </p>
  
  <p>I have used CSS media queries to adapt my style sheets to various dimensions. If you are trying to use a design-heavy book, you may find it easier just to declare that this ebook is best viewed on a tablet like the iPad (or certain dimensions). </p>
  
  <p>Another option is to create a fixed layout ebook (Check the <a href="https://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf" rel="nofollow noreferrer">Amazon Kindle Publishing Guidelines</a>  for information about that). </p>
  
  <p>Formatting a picture-heavy book can pose challenges. Try to make it as simple as possible. </p>
  
  <p>I have avoided InDesign for various reasons, but I know that many ID fans hang out  here. <a href="http://epubsecrets.com/" rel="nofollow noreferrer">http://epubsecrets.com/</a> You might find this <a href="https://ebooks.stackexchange.com/questions/7143/what-are-serif-and-sans-serif-fonts-on-different-ebook-reading-systems">listing of available fonts for each device</a> to be useful: </p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-07-06T19:09:32.537Z
Answers.LastActivityDate: 2017-07-06T19:09:32.537Z
Answers.UserDisplayName: idiotprogrammer
Body: <p>I would like to design an ebook in InDesign but I am struggling with the formatting. The book it looks bad in epub format. I did research and I understand that flowing text will not be perfect because it will be adjusted by the user. </p>
  
  <p>But how can I keep the basics like a line break after the paragraphs? </p>
  
  <p>How to make the contents page look good besides just the blue links? </p>
  
  <p>Are iPad dimensions the way to start designing or it does not matter what size I will start with because it will reflow anyway?</p>
  
  <p>It will be published on Kindle and other publishing pages online. If it is not possible to do anything about the styling is it even worth to do it in InDesign?</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-07-02T04:05:11.687Z
Comments.Text: EPUB books use HTML/CSS styling. You should be able to do this with CSS `padding-bottom` But I am not sure if the Kindle supports that, nor do I know how to get that set in InDesign (adjust the book's CSS template?)
Comments.UserDisplayName: Anthon
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-07-03T08:54:54.327Z
Comments.Text: OK I see. Looks like the problem is the software that I am using to edit the ebook.
Comments.UserDisplayName: Joanna
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-07-03T09:15:43.963Z
Comments.Text: Not necessarily, it could well be that InDesign is capable of doing this, I just don't know how as I am not familiar with the application.
Comments.UserDisplayName: Anthon
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-07-04T13:40:04.937Z
Comments.Text: I think you also need to under stand book readers more as well " flowing text will not be perfect because it will be adjusted by the user"  is the wrong way of thinking. Flowing text *IS* perfect because the user can control it and so can read the information insted of formatting messing it up. You do not know what size the reader has to use so as to be able to read
Comments.UserDisplayName: mmmmmm
Tags: <epub>
Title: How to make Epub look good?
UserDisplayName: Joanna
ThreadText: # How to make Epub look good?
  
  (Asked by: username_0 on 2017-07-01)
  
  I would like to design an ebook in InDesign but I am struggling with the formatting. The book it looks bad in epub format. I did research and I understand that flowing text will not be perfect because it will be adjusted by the user.
  
  But how can I keep the basics like a line break after the paragraphs?
  
  How to make the contents page look good besides just the blue links?
  
  Are iPad dimensions the way to start designing or it does not matter what size I will start with because it will reflow anyway?
  
  It will be published on Kindle and other publishing pages online. If it is not possible to do anything about the styling is it even worth to do it in InDesign?
  
  **Tags:** epub
  
  > **Comments:**
  > **username_1**: EPUB books use HTML/CSS styling. You should be able to do this with CSS `padding-bottom` But I am not sure if the Kindle supports that, nor do I know how to get that set in InDesign (adjust the book's CSS template?)  
  > **username_0**: OK I see. Looks like the problem is the software that I am using to edit the ebook.  
  > **username_1**: Not necessarily, it could well be that InDesign is capable of doing this, I just don't know how as I am not familiar with the application.  
  > **username_2**: I think you also need to under stand book readers more as well " flowing text will not be perfect because it will be adjusted by the user"  is the wrong way of thinking. Flowing text *IS* perfect because the user can control it and so can read the information insted of formatting messing it up. You do not know what size the reader has to use so as to be able to read  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_3 on 2017-08-14. Score: 2 | Accepted answer
  
  Add this css to Indesign (this should be a text file but I'm not going to go through it and add four spaces to each line)
  
  /\*
  This document has been created with Marked.app <http://markedapp.com>, Copyright 2011 Brett Terpstra
  
  ## Please leave this notice in place, along with any additional credits below.
  
  Title: Manuscript
  Author: Brett Terpstra
  Description: Courier, Double-spaced
  \*/
  body {
  -webkit-font-smoothing: subpixel-antialiased;
  font: normal 1em/2.5em "Courier", monospace;
  margin: 4em 1in 1in 4em;
  width: auto; }
  
  html > body {
  font-size: 12pt; }
  
  h1 {
  text-align: center;
  font-size: 2.2857em;
  margin: .6563em 0; }
  
  h2 {
  font-size: 1.7143em;
  margin: .875em 0; }
  
  h3 {
  text-align: center;
  font-size: 1.5em;
  margin: 1em 0; }
  
  h4 {
  font-size: 1.2857em;
  margin: 1.1667em 0; }
  
  h5 {
  font-size: 1.15em;
  margin: 1.3em 0; }
  
  h6 {
  font-size: 1em;
  margin: 1.5em 0; }
  
  body, p, td, div {
  color: #111111;
  font-family: "Courier", monospace;
  word-wrap: break-word; }
  
  h1, h2, h3, h4, h5, h6 {
  color: #111111;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5em; }
  
  a {
  color: #0d6ea1;
  text-decoration: none;
  -webkit-transition: color 0.2s ease-in-out;
  -moz-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out; }
  a:hover {
  color: #3593d9; }
  
  .footnote {
  color: #0d6ea1;
  font-size: .8em;
  vertical-align: super; }
  
  # wrapper img {
  
  max-width: 100%;
  height: auto; }
  
  dd {
  margin-bottom: 1em; }
  
  li > p:first-child {
  margin: 0; }
  
  ul ul, ul ol {
  margin-bottom: .4em; }
  
  caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr {
  border-spacing: 0; }
  
  table {
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-collapse: collapse;
  display: table;
  empty-cells: hide;
  margin: -1px 0 23px;
  padding: 0;
  table-layout: fixed; }
  
  caption {
  display: table-caption;
  font-weight: 700; }
  
  col {
  display: table-column; }
  
  colgroup {
  display: table-column-group; }
  
  tbody {
  display: table-row-group; }
  
  tfoot {
  display: table-footer-group; }
  
  thead {
  display: table-header-group; }
  
  td, th {
  display: table-cell; }
  
  tr {
  display: table-row; }
  
  table th, table td {
  padding: 0 1em; }
  
  table thead {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
  
  table tbody {
  background: rgba(0, 0, 0, 0.05); }
  
  table tfoot {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(0, 0, 0, 0.2); }
  
  figure {
  display: inline-block;
  position: relative;
  margin: 1em 0 2em; }
  
  figcaption {
  font-style: italic;
  text-align: center;
  background: white;
  color: #666666;
  position: absolute;
  left: 0;
  bottom: -24px;
  width: 98%;
  padding: 1%;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  
  figure:hover > figcaption {
  /\* background: rgba(0,0,0,1) \*/ }
  
  .poetry pre {
  display: block;
  font-family: Georgia, Garamond, serif !important;
  font-style: italic;
  margin-left: 1em; }
  .poetry pre code {
  font-family: Georgia, Garamond, serif !important;
  word-break: break-all;
  word-break: break-word;
  /\* Non standard for webkit \*/
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  white-space: pre-wrap; }
  
  blockquote p {
  text-indent: 0;
  font-style: italic; }
  
  sup, sub, a.footnote {
  font-size: 1.4ex;
  height: 0;
  line-height: 1;
  position: relative;
  vertical-align: super; }
  
  sub {
  vertical-align: sub;
  top: -1px; }
  
  blockquote+p {
  margin: 0;
  text-indent: 0;
  }
  
  h2+p {
  margin: 0;
  text-indent: 0;
  }
  
  p, h5 {
  margin: 0;
  text-indent: 1.5em;
  }
  
  dt, th {
  font-weight: 700; }
  
  table tr:nth-child(odd), table th:nth-child(odd), table td:nth-child(odd) {
  background: rgba(255, 255, 255, 0.06); }
  
  table tr:nth-child(even), table td:nth-child(even) {
  background: rgba(200, 200, 200, 0.25); }
  
  @media print {
  body {
  overflow: auto; }
  
  img, pre, blockquote, table, figure {
  page-break-inside: avoid; }
  
  p {
  page-break-inside: auto; }
  
  #wrapper {
  background: white;
  color: #303030;
  padding: 10px;
  position: relative;
  text-indent: 0; } }
  @media screen {
  .inverted {
  background: #252a2a; }
  .inverted #wrapper {
  background: #252a2a; }
  .inverted hr {
  border-color: #333f40 !important; }
  .inverted p, .inverted td, .inverted li, .inverted h1, .inverted h2, .inverted h3, .inverted h4, .inverted h5, .inverted h6, .inverted pre, .inverted code, .inverted th, .inverted .math, .inverted caption, .inverted dt, .inverted dd {
  color: #eeeeee; }
  .inverted table {
  background: none; }
  .inverted table tr:nth-child(odd), .inverted table td:nth-child(odd) {
  background: none; }
  .inverted a {
  color: #acd1d5; }
  
  ::selection {
  background: rgba(157, 193, 200, 0.5); }
  
  h1::selection {
  background-color: rgba(45, 156, 208, 0.3); }
  
  h2::selection {
  background-color: rgba(90, 182, 224, 0.3); }
  
  h3::selection, h4::selection, h5::selection, h6::selection, li::selection, ol::selection {
  background-color: rgba(133, 201, 232, 0.3); }
  
  code::selection {
  background-color: rgba(0, 0, 0, 0.7);
  color: #eee; }
  
  code span::selection {
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: #eee !important; }
  
  a::selection {
  background-color: rgba(255, 230, 102, 0.2); }
  
  .inverted a::selection {
  background-color: rgba(255, 230, 102, 0.6); }
  
  td::selection, th::selection, caption::selection {
  background-color: rgba(180, 237, 95, 0.5); } }
  
  > **Comments:**
  > **username_0**: Thank you for the code, I added as provided. It is just perfect! Is there any chance, I can also add the author name in the code? Also, I have only one, cover image but it is broken in half. Any idea how to solve this?  
  > **username_3**: You can leave the author's name in the code by commenting out the lines as you would do when writing any html code: <-- text you want to comment out -->  My experience with e-readers is that different programs yield different results when trying to display the cover page. I don't know which dimensions work universally. I think that BBeBooks blog might have further information. http://bbebooksthailand.com  
  > **username_0**: Thank you very much for all help! I have found one solution for the author is to add it in Metadata in export options in InDesign. Also, I removed all images and it is possible to add cover by uploading it in InDesign export options as well. Thank you!  
  > **username_3**: The author who wrote the css should not be named as the author of the book itself in the epub's metadata. But if there's a place other than that reserved for the book's author, fine.  
  > **username_0**: Unfortunately, from InDesign that seems like the only way. In iBooks it displays as an author name.  
  
  ---
  
  ### Answer by username_4 on 2017-07-06. Score: -1
  
  The main advantage of Indesign is that it lets you publish a print version which can also be exported to an ebook format.
  
  For ebook design you must deal with the limitations of reading systems --especially that of Kindle.
  
  As a first step, it might help to have direct access to the devices you want to design for which you can use for testing. For me, I use a 3 year old Kindle, a recent iphone, an older iPad, an android tablet (and various reading software on these devices).
  
  I have used CSS media queries to adapt my style sheets to various dimensions. If you are trying to use a design-heavy book, you may find it easier just to declare that this ebook is best viewed on a tablet like the iPad (or certain dimensions).
  
  Another option is to create a fixed layout ebook (Check the [Amazon Kindle Publishing Guidelines](https://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf) for information about that).
  
  Formatting a picture-heavy book can pose challenges. Try to make it as simple as possible.
  
  I have avoided InDesign for various reasons, but I know that many ID fans hang out here. <http://epubsecrets.com/> You might find this [listing of available fonts for each device](https://ebooks.stackexchange.com/questions/7143/what-are-serif-and-sans-serif-fonts-on-different-ebook-reading-systems) to be useful:
  
  
  ---
  
  