Skip to main content
Participant
September 30, 2020
Question

Code for wrapping tags with a div

  • September 30, 2020
  • 2 replies
  • 188 views

I am in the process of creating an ebook for Kindle and wish to avoid a main heading at the bottom of a page. I am aware of ‘page-break-inside: avoid but would need to wrap a div around the main head and the first paragraph beneath it. There are a lot of these to do so I would like to know of any method that can do this easily without manually doing each instance.

Thanks in advance.

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Community Expert
    September 30, 2020

    Widows & Orphans

    The Kindle text flows from one "page" to the next, and the contents of the page will vary depending on what font size the reader chooses and what app they use to view the eBook (compare an ebook on your desktop PC and the same eBook on your smartphone).  So you must choose between a chapter break and the risk of having your headings widowed at the bottom of the page.

     

    CSS for Page Breaks  -

    This excerpt from Kindle Direct Publishing Guidelines

    https://kdp.amazon.com/en_US/help/topic/GH4DRT75GWWAGBTU

     

    Kindle now supports CSS attributes for page-break-inside:avoid and break-inside:avoid. This allows publishers to group elements together so they do not break across pages. Use cases include images with captions and headlines with paragraphs you want to keep together in your design.

    In addition, Kindle supports CSS for page-break-after and break-after as well as page-break-before and break-before, which can be used to avoid page breaks before and after specified containers or blocks. Kindle looks at these properties to determine if page breaks need to be prevented between or inside elements. Values for these attributes are :avoid, :auto, and :always.

     

    Nancy O'Shea— Product User & Community Expert
    Jon Fritz
    Community Expert
    Community Expert
    September 30, 2020

    One of the faster manual ways to do it would be to...

    1. Highlight the code you want to wrap 
    2. Hit Ctrl/Cmnd + T

    3. Start typing div, it will auto-fill after d-i
    4. With div highlighted in the code hint, hit Enter twice

    Depending on how your code is currently written, there may be an automated way to add the <div> using the advanced options in the Find & Replace tools (Ctrl/Cmnd + Shift + F) but that can also lead to some massive problems if it's not done exactly right.