11 Replies Latest reply on Mar 11, 2016 12:23 PM by Pickory

    Read Aloud eBooks

    ricksecc Level 1

      Hello everyone,

      I was about to celebrate my first Read-Aloud eBook until I was presented with a very big problem. All my overlays work great except for one specific location...The drop cap.

      Since indesign separates every single word in the export, it also separates all the drop caps into their own span and so when you read the book the first letter is highlighted and then the rest of the word is highlighted.

      Can one of you please suggest an alternate route I can take to insure the whole word is highlighted, the drop cap plus the rest of that word? I've been fiddling for over 15 hours on this with no luck.

      Thank you all.

       

      Rick

       

      dropcap-2-issue.pngdropcap-1-issue.png

        • 1. Re: Read Aloud eBooks
          BobLevine MVP & Adobe Community Professional

          These are off the top of my head. I’ve never done a read aloud book and I have no idea what happens behind the scenes.

           

           

           

          You could crack open the EPUB but I don’t even want to think about that if it’s fixed layout.

           

           

           

          Another thought would be to convert the dropcaps to outlines and anchor it. Then use a no fill no stroke .01% scale for the real first letter.

          • 2. Re: Read Aloud eBooks
            ricksecc Level 1

            Yes, This is a fixed layout book so when indesign exports it puts every word into a different span for positioning purposes which is great. Except for my case, it also export drop caps as separate pieces and so I'm trying to find a clever way of combining the drop cap with the rest of the word in the css or html.

             

            Thanks,

            Rick

            • 3. Re: Read Aloud eBooks
              BobLevine MVP & Adobe Community Professional

              You might also want to reconsider the design and kill the drop cap.

              • 4. Re: Read Aloud eBooks
                ricksecc Level 1

                Hi Bob,

                I've thought of that . I would rather keep the design if I can as the author loves the drop cap. It's a children's book and they are popular in that niche.

                My other concern about the drop cap being separate, is the first word is really no longer a real word when it comes to the live text feature of the epub.

                I wonder if Apple would even accept it as is.

                 

                Rick

                • 5. Re: Read Aloud eBooks
                  BobLevine MVP & Adobe Community Professional

                  I wish I could help, but this one is out of my area of expertise.

                   

                   

                   

                  Do come back and let us know what you finally wind up doing, though. It might help someone else in the same situation.

                  • 6. Re: Read Aloud eBooks
                    ricksecc Level 1

                    Thanks Bob.

                    I sure will. Read Aloud are great and offer kids learning on many levels so I do hope I can figure this out in a clean and 'easy' way.

                     

                    Rick

                    • 7. Re: Read Aloud eBooks
                      Pickory Level 3

                      If you are up for doing it by hand.

                       

                      Look up first-letter. You will have to merge the two spans.

                       

                      This site is quite useful.

                      Creating drop caps using CSS

                      • 8. Re: Read Aloud eBooks
                        ricksecc Level 1

                        Hello Pickory,

                        I appreciate your idea there but sadly we get right back to two spans and for the media overlay to highlight the word, it has to all be in one span somehow.

                        This is starting to drive me nuts. I've download a few from the iBookstore with read aloud with drop caps but I can't crack them open to see how they did it.:(

                         

                        Rick

                        • 9. Re: Read Aloud eBooks
                          Pickory Level 3

                          How are you adding the overlays?

                           

                          You would have to merge the two spans and fiddle with the style by adding some thing like this.

                           

                          p.override-style-1:first-letter {

                          font-size:275%;

                          line-height:1;

                          float:left;

                          }

                          • 10. Re: Read Aloud eBooks
                            ricksecc Level 1

                            Hi Pickory,

                            Would you be interested in helping me solve this for some type of compensation?

                            I am still unable to find a solution to this issue and would very much like to solve my issue but also give the solution to all those who will run into this issue moving forward. Being Indesign is the culprit here in how it separates each word into a separate <div>, it also separates all drop caps as well which is a problem with doing a read along.

                            Please message me if interested and we can talk further.

                            Regards,

                            Rick

                            • 11. Re: Read Aloud eBooks
                              Pickory Level 3

                              Hello Rick,

                               

                              How do you see the highlight working? Do you want some thing like this.

                              Screen Shot 2016-03-11 at 20.07.37.png

                              The yellow / red is showing how the read aloud would highlight. If you want the bottom part of the H to be highlighted with the rest of the word "ello", I don't think I can help at this time.

                               

                              Best.

                               

                              P.

                               

                              Edited to say:

                               

                              Actually I am not sure if that is true. You might be able to highlight two HTML objects at the same time. That might be what you should be looking at.

                               

                              Any quite happy to look at your files, if you want.