Answers.Body: <p>According to this <a href="http://www.pigsgourdsandwikis.com/2010/06/goodbye-widows-and-orphans-or-yes-you.html" rel="nofollow noreferrer">blog article</a>, you should use the <code>display: inline-block</code> property on  a <code>div</code> selector that encloses your header and paragraph.</p>
  
  <hr>
  
  <p>Here is an excerpt from the said article:</p>
  
  <blockquote>
    <p>If you set the <code>display</code> property for a <code>div</code> to be <code>inline-block</code>,
    iBooks will display the contents of the entire <code>div</code> together on a
    single page, skipping to a new page if necessary, unless the entire
    <code>div</code> can't fit on a page by itself, in which case it will be divided
    across pages.</p>
    
    <p>It's simple and very powerful: <code>div {display: inline-block}</code></p>
    
    <p>Here's a short document with no <code>inline-block</code> display. Notice how the
    header is separated from the paragraph that follows it, and even how a
    bit of the background bleeds through to the following page. Icks. The
    image and caption are likewise separated. Terrible!</p>
    
    <p><a href="https://i.sstatic.net/KuVqi.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/KuVqi.jpg" alt="enter image description here"></a></p>
    
    <p><a href="https://i.sstatic.net/DlMgg.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/DlMgg.jpg" alt="enter image description here"></a></p>
    
    <p>Here's the exact same document with one <code>div</code> enclosing the header and
    paragraph and second <code>div</code> enclosing the image and caption. Both
    <code>div</code>s were set to <code>display:inline-block</code>. The result? Goodbye widows
    and orphans:</p>
    
    <p><a href="https://i.sstatic.net/jp41W.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/jp41W.jpg" alt="enter image description here"></a></p>
    
    <p><a href="https://i.sstatic.net/i8shL.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/i8shL.jpg" alt="enter image description here"></a></p>
    
    <p>Where can you use this? As shown here, if you have a series of
    illustrations with captions, use <code>inline-block</code> to keep the caption
    right under the illustration.</p>
    
    <p>If you want a header to never appear alone at the bottom of the page,
    but always be followed by at least one paragraph, just enclose the
    header and the paragraph in an <code>inline-block</code> <code>div</code>.</p>
  </blockquote>
  
  <hr>
  
  <p>The article that I have linked also contains two epub files that can be used as a reference for these examples.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-10-31T22:47:08.577Z
Answers.Text: I tried this and it created split lines on the ibook reader cutting the line in half top/bottom, seemed to treat it like a graphic instead of text.
Answers.UserDisplayName: bobbdelsol
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-04T10:00:07.227Z
Answers.LastActivityDate: 2017-02-04T10:00:07.227Z
Answers.UserDisplayName: Sekhemty
Answers.Body: <p>I would use </p>
  
  <pre><code>h4 {page-break-after: avoid;}
  
  p {
    widows: 2;
    orphans: 2;
  }
  </code></pre>
  
  <p>I think this works for Kindles as well as epubs. This is just example code. My guess is that this is structured content you would want to use a special class for the paragraphs below the h4. </p>
  
  <p>I would not be surprised if the Kindle  e-ink devices do not support this css property when it is used inside a  divs -- only for h1 or p. </p>
  
  <p>Last time I checked Google Play Books doesn't seem to render this css property correctly (I haven't checked recently though). </p>
  
  <p>Sekhemty's solution probably works too, but it was used when epub readers and kindle devices didn't support these css properties. Now they do. </p>
  
  <p>Read more on this topic in this article <a href="https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219#.tzhyw83kh" rel="nofollow noreferrer">https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219#.tzhyw83kh</a> (about 2/3 of the way down). </p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-06T01:29:11.337Z
Answers.Text: Your answer is a better solution, it allows to keep the files cleaner +1
Answers.UserDisplayName: Sekhemty
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-05T23:48:47.160Z
Answers.LastActivityDate: 2017-02-06T04:12:28.493Z
Answers.LastEditDate: 2017-02-06T04:12:28.493Z
Answers.UserDisplayName: idiotprogrammer
Body: <p>I have a chapter that has brief information for each of the 50 states. Each section begins with a state's name in a h4 tag.</p>
  
  <p>When I preview my book, I sometimes see a header resting on the bottom of a page, with the following paragraph on the next page.</p>
  
  <p>I tried wrapping the header and following paragraph in a div, like this...</p>
  
  <pre><code>&lt;div class="Widow"&gt;
    &lt;h4 class="State" id="me"&gt;Maine&lt;/h4&gt;
    &lt;p&gt;This is a paragraph.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then applying this style:</p>
  
  <pre><code>div.Widow { widows: 3; }
  </code></pre>
  
  <p>I also changed widows: 3 to orphans: 3, just to make sure I didn't have it backwards. But it doesn't work.</p>
  
  <p>Can anyone suggest another strategy for gluing a paragraph to a header? </p>
  
Tags: <epub><html><css><editing>
Title: How can I prevent a widowed/orphaned header?
UserDisplayName: WordBear
ThreadText: # How can I prevent a widowed/orphaned header?
  
  (Asked by: username_0 on 2017-02-03)
  
  I have a chapter that has brief information for each of the 50 states. Each section begins with a state's name in a h4 tag.
  
  When I preview my book, I sometimes see a header resting on the bottom of a page, with the following paragraph on the next page.
  
  I tried wrapping the header and following paragraph in a div, like this...
  
  ```
  <div class="Widow">
    <h4 class="State" id="me">Maine</h4>
    <p>This is a paragraph.</p>
  </div>
  
  ```
  
  Then applying this style:
  
  ```
  div.Widow { widows: 3; }
  
  ```
  
  I also changed widows: 3 to orphans: 3, just to make sure I didn't have it backwards. But it doesn't work.
  
  Can anyone suggest another strategy for gluing a paragraph to a header?
  
  **Tags:** epub, html, css, editing
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2017-02-04. Score: 3 | Accepted answer
  
  According to this [blog article](http://www.pigsgourdsandwikis.com/2010/06/goodbye-widows-and-orphans-or-yes-you.html), you should use the `display: inline-block` property on a `div` selector that encloses your header and paragraph.
  
  ---
  
  Here is an excerpt from the said article:
  
  > If you set the `display` property for a `div` to be `inline-block`,
  > iBooks will display the contents of the entire `div` together on a
  > single page, skipping to a new page if necessary, unless the entire
  > `div` can't fit on a page by itself, in which case it will be divided
  > across pages.
  >
  > It's simple and very powerful: `div {display: inline-block}`
  >
  > Here's a short document with no `inline-block` display. Notice how the
  > header is separated from the paragraph that follows it, and even how a
  > bit of the background bleeds through to the following page. Icks. The
  > image and caption are likewise separated. Terrible!
  >
  > [![enter image description here](https://i.sstatic.net/KuVqi.jpg)](https://i.sstatic.net/KuVqi.jpg)
  >
  > [![enter image description here](https://i.sstatic.net/DlMgg.jpg)](https://i.sstatic.net/DlMgg.jpg)
  >
  > Here's the exact same document with one `div` enclosing the header and
  > paragraph and second `div` enclosing the image and caption. Both
  > `div`s were set to `display:inline-block`. The result? Goodbye widows
  > and orphans:
  >
  > [![enter image description here](https://i.sstatic.net/jp41W.jpg)](https://i.sstatic.net/jp41W.jpg)
  >
  > [![enter image description here](https://i.sstatic.net/i8shL.jpg)](https://i.sstatic.net/i8shL.jpg)
  >
  > Where can you use this? As shown here, if you have a series of
  > illustrations with captions, use `inline-block` to keep the caption
  > right under the illustration.
  >
  > If you want a header to never appear alone at the bottom of the page,
  > but always be followed by at least one paragraph, just enclose the
  > header and the paragraph in an `inline-block` `div`.
  
  ---
  
  The article that I have linked also contains two epub files that can be used as a reference for these examples.
  
  > **Comments:**
  > **username_2**: I tried this and it created split lines on the ibook reader cutting the line in half top/bottom, seemed to treat it like a graphic instead of text.  
  
  ---
  
  ### Answer by username_3 on 2017-02-05. Score: 3
  
  I would use
  
  ```
  h4 {page-break-after: avoid;}
  
  p {
    widows: 2;
    orphans: 2;
  }
  
  ```
  
  I think this works for Kindles as well as epubs. This is just example code. My guess is that this is structured content you would want to use a special class for the paragraphs below the h4.
  
  I would not be surprised if the Kindle e-ink devices do not support this css property when it is used inside a divs -- only for h1 or p.
  
  Last time I checked Google Play Books doesn't seem to render this css property correctly (I haven't checked recently though).
  
  username_1's solution probably works too, but it was used when epub readers and kindle devices didn't support these css properties. Now they do.
  
  Read more on this topic in this article <https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219#.tzhyw83kh> (about 2/3 of the way down).
  
  > **Comments:**
  > **username_1**: Your answer is a better solution, it allows to keep the files cleaner +1  
  
  ---
  
  