9 Replies Latest reply on Jul 25, 2013 7:56 PM by NaviB2

    Epub putting text in a blue box

    NaviB2 Level 1

      Hi there,

       

      I am working on an epub in ID CC. The author wants some text to be in a blue box and a different colour. I have worked out how to do this by putting the text in a new text box and making the background blue, and also applying a style to make the text white.

       

      However, when the textbox exports to epub, it remains a fixed size and does not look good.

       

      Can text boxes be exported to epub so that they resize, the way you can get images to do?

       

      Or do I need to apply a css style to a div in the epub when I do the final edit in DW instead?

       

      Thanks so much.

        • 1. Re: Epub putting text in a blue box
          Steve Werner Adobe Community Professional & MVP

          In an EPUB file, there can be one stream of text. When viewed in the EPUB reader, it will resize depending on the dimensions of the EPUB reader window, and the settings chosen.

           

          However, you can also anchor other text frames, like a sidebar. It sounds like that's what you want. Try anchoring the text frame in the main text flow. In InDesign CC, select the anchored frame and choose Object > Text Frame Options > Auto-size, and set the width and height to autosize.

           

          I don't have the time to test it this morning, but I think this might work.

          • 2. Re: Epub putting text in a blue box
            NaviB2 Level 1

            Hi Steve,

             

            Thanks so much for this advice! I didn't think to look and see if I could get the text box to resize. It is going to be in the text flow, not even sitting on the side, as the client wants some of the text highlighted that way.

             

            Thanks again!

            • 3. Re: Epub putting text in a blue box
              NaviB2 Level 1

              Hi there Steve,

               

              Thanks so much for your advice on this point, but sadly it did not work.

               

              It still produces a blue box that is a fixed size, no matter how wide or narrow I make the book preview in Oracle Digital Editions.

               

              Does anyone know if you can create a textbox within the main textbox that will resize when it goes out to epub? I need to have text in blue boxes every now and then in this epub and I am having trouble working out how to do this in InDesign.

               

              I am a web designer as well, so I know I could easily edit the epub to have a blue box using CSS (or I hope the epub format supports that anyway), but I would like to set up the blue box in InDesign and have it export out to epub and be able to be resized.

               

              Thanks so much folks.

              • 4. Re: Epub putting text in a blue box
                roenoz Level 2

                Hi Mary, since you said that you are web designer, surely you can edit your epub css. In that way you have full control of how the look of your text. InDesign is a very powerful application, but you can't output epub easily without modifying the css file. And most ePub designer modifies it's css by cleaning up junk and unnecessary lines of codes in css.

                • 5. Re: Epub putting text in a blue box
                  NaviB2 Level 1

                  Hi Roenoz,

                   

                  Yes editing the css seems the easiest solution here for me. I will try that and see how it displays in the epub viewer. Fingers crossed!

                  • 6. Re: Epub putting text in a blue box
                    roenoz Level 2

                    Is this what you really mean?

                    http://img834.imageshack.us/img834/8408/1z9u.jpg

                    http://img7.imageshack.us/img7/7756/92u7.jpg

                    Hope it is.

                    • 7. Re: Epub putting text in a blue box
                      TᴀW Adobe Community Professional & MVP

                      Mary,

                       

                      Consider using a custom CSS file. When you export the ePub from InDesign

                      you can point it to that file in the export dialog box, and any settings

                      there will override InDesign's CSS. The advantage is that if you make

                      any edits to the InDesign file you don't have to keep manually editing

                      the CSS afterwards.

                       

                      Ariel

                      • 8. Re: Epub putting text in a blue box
                        NaviB2 Level 1

                        Hi roenoz,

                         

                        Yes that is what I mean. I find I have to set the blue text box to be wider than the page size in order to have it a reasonable size in the epub. But then when I resize the epub page, the blue box does not change size.

                         

                        So maybe adding a CSS file like Ariel suggests is the way to go.

                         

                        Thanks so much for your help!

                        • 9. Re: Epub putting text in a blue box
                          NaviB2 Level 1

                          Hi Ariel,

                           

                          Thanks for this. Yes I did notice on the epub export screen in ID CC there is now that option to attach an external CSS file.

                           

                          How would I name the div id or class to apply to the blue box? Would I set up a style for that and then check what name it exports to in the epub CSS and then redefine that class in the new CSS stylesheet I plan to attach?

                           

                          This is a new option here that I can see I will need to investigate.

                           

                          I am setting the book up in ID CC for epub and then once that is finalised I will set it again for print.

                           

                          Thanks so much for your help with this.