3 Replies Latest reply on Nov 15, 2013 5:28 AM by sjpt

    Text cut off in multicolumn across multiple pages

    Techi Panda Level 2

      Hi Experts

       

      I am creating an epub with some color boxes with two columns. I have a problem with text spreading multiple pages which is cut off top and bottom of the box. See the screenshot below. Anyone faced these kind of problem before?

       

      Page 1

      Photo_1.png

       

      Page 2

       

      Photo_2.png

       

       

      Below is the code for my epub.

       

      HTML

      <div class="box-1">

      <div class="box1-content">

      <p class="border-text">title</p>

      <p class="box1-head">Title Title Title Title Title Title Title Title Title </p>

      <div class="mcol">

      <p class="TX1-BOX">On the Ins...</p>

      </div>

      </div>

      </div>

       

      CSS:

      div.box-1

      {

      background-color:#ECF3D8;

      border-left:30px solid #97C000;

      padding:10px;

      margin-top:24px;

      margin-bottom:24px;

      margin-right:18px;

      page-break-before:always;

      }

       

       

      div.box1-content

      {

      margin-left:3%;

      padding:50px 75px;

      }

       

       

      p.box1-head

      {

      font-family: "Arial";

      font-size: 32px;

      color:#D60083;

      margin-top:0px;

      }

       

       

      p.TX1-BOX

      {

      font-family:"Arial";

      font-size: 12px;

      margin-top:0px;

      margin-bottom:16px;

      }

       

       

      Kindly suggest, Thanks in advance

       

      Regards

      Panda

        • 1. Re: Text cut off in multicolumn across multiple pages
          sjpt Level 4

          Looks as if the flow is completely wrong, as it goes to page 1 col 1 before page 1 col 2.

          You must have made it somehow so the entire document was created in a very long two column box, and the box then sliced up into pages.

           

          I'm not sure how to use html/css for ebook pagination, so I am afraid I can't suggest the correct solution.

           

          Is all the CSS there, I can't see anything for two column?

          • 2. Re: Text cut off in multicolumn across multiple pages
            Techi Panda Level 2

            Hi Sjpt

             

            sorry i missed the CSS for two column

             

            div.mcol

            {

            -moz-column-count:2; /* Firefox */

            -webkit-column-count:2; /* Safari and Chrome */

            column-count:2;

            -moz-column-gap:20px; /* Firefox */

            -webkit-column-gap:20px; /* Safari and Chrome */

            column-gap:20px;

            }

             

            Yes my two column box spreads over 5 pages, all the other content are single column only this box elemets gives problem to me any suggestion

             

            Thank you for your reply

            • 3. Re: Text cut off in multicolumn across multiple pages
              sjpt Level 4

              I just did an update which the forum threw away ...

               

               

              Looks as if you need an @-epubx-partition rule to define properly flowing two column,

              probably (but ???) to replace div.box-1

              http://www.idpf.org/epub/pgt/#s3

               

              General opinion on the web seems that it is best to avoid 2 column as most ereaders have pretty small screens.

              May not apply if you know you have just one target mahine with a largish screen.