If you have downloaded my open textbook, ‘Teaching in a Digital Age’ in pdf or Modi format for the iPad or Kobo, you may have noticed that many of the images I have liberally used throughout the book do not fit on the page or have become separated from their ‘frame’ (the green and black lines before and after the images), in the downloaded versions.

The problem

Here is an example (I have reduced the size of both images):

This is the html version that you would read by going to the book site (http://opentextbc.ca/teachinginadigitalage/)

Original html web version
Original html web version

Nice, isn’t it? And this is how it appears in the pdf version:

pdf version
pdf version

You can see the image has been removed from the frame and dropped into the next page.

The same kind of thing happens in the iPad and Kindle versions, only worse, because the screen size is smaller. I realise this is not a unique problem and one faced every day when moving materials to mobile devices.

The reason

This happens primarily because the html version read on computer screens or laptops scrolls, while the pdf and mobile device versions are paginated. What fits nicely on a scrolled screen does not always fit a paginated version because the image is too large to fit within the remaining page space, so it is bounced to the next page. This is made worse by my having artistically framed the images. The frames are independent objects from the image though so do not move with the image when it is ‘bounced’.


OK, I should have known this would happen, but I didn’t until after I finished the book. (This is one form of experiential learning that I don’t recommend). One way to minimise (but not eliminate by any means) the problem would be to avoid putting in frames for the images (the frames were suggested by a highly professional graphic designer) and keeping the in-text images much smaller. However, reducing the size of the images is not always desirable, especially with complex or detailed images.

In the end, it is a software problem needing a software solution, such as the ability to integrate frames around images, and to resize images to fit the pagination or to move paragraphs around the image until it fits the page.

The dilemma

So what should I do now? The html version works beautifully, but even reducing the size of graphics and moving them won’t solve the problem for the exported versions, because each exported version is different in the way it handles the lay-out. I could go through the whole book and remove the frames but there are over 100 images and graphics throughout the book.

Should I leave the frames? I can’t leave them on the html version and remove them from the other versions because the other versions are direct and complete exports of the html version. I also can’t edit the pdf version independently of the html version without creating a whole shadow site.

Is there a way to ‘fit’ frames to images in WordPress? if there is please let me know!

Does it matter?

This is where I really need your advice. OK, so it isn’t perfect as a pdf or on an iPad, but is it good enough? My wife says I’m crazy to worry about this (‘It’s the content that matters’), and my best friend accused me of being a compulsive-obsessive personality (that’s what good friends are there for, to tell you the truth), and he said if people don’t like it, they can use their laptop, but my wife and my friend are not the audience for this book. You are, and if this is a problem for you, I need to know.

So what’s your advice on this? Don’t worry about it, or find a solution, and if so, what?


  1. I think you are right to reach for a higher standard. The most satisfying solution would likely be a capability that resized images dynamically on export to match the best parameters for specific export formats (like EPUB or MOBI). Such animals exist, but would require an exploration of he technologies you use to house and export the material.

    For the frames: my suggestion is lose any attempts to apply design suited to “pixel perfect” page layout for web documents as they typically don’t translate well to paginated formats like your PDF layouts. Stick with simple, clean web layouts made via highly-structured HTML. You may still end up with an image separated by a page break from text related to it, but at least you won’t have broken design elements. You can also apply different stylesheets or templates for PDF output to make the web views carry more design than exports. There are also some HTML/CSS capabilities to ensure elements end up on the same output page and/or suggest page breaks. IIRC, http://alistapart.com has good docs on all that.

    That said, the only way to really get a great PDF version might be to do some post-export PDF editing, even including some repagination. Or of course to export to a page layout program (eg, Adobe InDesign), and produce a PDF from there rather than relying on automated ODF generation.

    These are some of the many complexities of digital publishing while still supporting other formats (like print).

    Good luck! HTH

    = Nate

    • Many thanks, Nate, for these suggestions. Much appreciated. I will pass on these comments to BCcampus and Pressbooks, as these are really beyond the scope of an individual author.

      • Nate hits it on the head – these are the complexities involved in digital publishing as we straddle the world of print with the world of the web (and other digital formats). Digital publishing formats are fluid, and print formats are rigid. By choosing to use a publishing platform that values digital over print (and Pressbooks is designed to favour web over print), you are making a choice to value flexible over rigid.

        However, as you have discovered, the two don’t play well. While Pressbooks and the PDF engine does an admirable job of creating an acceptable print ready document, you are still going to end up with having to compromise the layout of the rigid print for the flexible digital.

        This is actually the biggest conceptual hurdle that most people moving from print based publishing to digital publishing have to contend with. It is often very disconcerting for those who have designed for the rigid formats of print to make the transition to the fluid world of digital. And they are often disappointed because they have to give up their pixel (or point in the print world) control and surrender to the fluid layouts of digital that put the user, not the publisher, in control of the appearance of the content.

        The dilemma I have, as someone who is developing tools that attempt to straddle both worlds, is how can I satisfy the expectations of those who are accustomed and expecting rigid print, while still satisfy those who understand and expect the fluid digital. It is a heck of a challenge and someone is going to end up unhappy in the end, as you are seeing. Your book website looks great and works well. Your PDF (which I consider print, not digital as it enforces a rigid layout vs the digital flexible) is expecting rigid and cannot accommodate the digital flexible flow.

        This is at the heart of why I find PDF so frustrating to work with. It appears to be digital, but is really analog hiding in a digital sheep’s clothing.

        In the end, the decision is the author as to which compromise they are willing to make. Are they a digital publisher first making an analog version available out of convenience to those who still live in the analog world, in which case the PDF output would be acceptable. Or are they an analog publisher who wants to create rigid layouts (ie PDF and print) first with the web/ePub and digital publishing as the afterthought.

        • __I understand your dilemma, Clint, and suggest outsourcing the design and production of print edition textbooks to those with the necessary skills and experience.

        • So, the future is DIGITAL obviously and print will soon be a relic of the past like Vinyl records. it is NOT necessary to print and reading will soon take place exclusively on digital devices. This is obvious. There might be nostalgia for books but they are definately going the way of the way of the Dodo bird. The trees of the planet rejoice. Anyone can now publish a book. Prices fall. Win-win-win. Print material had it’s day but thanks to technology we have moved past that stage of development, just as some day, digital publishing will be replaced by something superior. Evolution baby. Our kids don’t even know what a typewriter is anyways…We need to teach kids using the tools they use and we need to prepare them for their future, not our past.

  2. __Thanks Tony, I opened my pdf copy to see what you mean _ you’re asking “is it good enough?” _ I’d say Yes, ’cause I’d like to agree with your wife and friend __ but Teaching in a Digital Age might be cited as “a high quality benchmark” and it’s great you’re asking everyone for their perspectives. I’m not a Teacher in your audience, my perspective focuses on creative communications with Open Design and the ways Visual Communications is used to enhance the Teacher’s & Student’s experience, a perspective that places the highest value on a Student’s time using the materials.
    Meeting Standard Textbook Quality is as fundamental as well drawn technical artwork that is 100% accurate. See sub-par example recently found, a Microsoft Office Mix of an 8th Grade Math lesson on Pythagorean Theorem – Teacher created shareable content which is not of Standard Textbook Quality and not fit for purpose in all 8th Grade Math classes – a Microsoft Office Mix _ https://mix.office.com/watch/37gcrbrmsqg1 _
    I’d advise getting useful feedback by organizing a peer review via BCcampus review process-rubric for the online HTML version with a scrolling single page layout and I’d suggest that you arrange for a print book format pdf that is designed specifically in 2 page Readers’ Spreads. Arrange Hewlett Funding for design via Open Cohort Wiley-Bliss connections. Good luck Tony.

  3. Dear Tony, I think that part of the problem is related to how the frames were inserted, they are independent from the image. analyzing the HTML from your WP site, you have a paragraph ( tag) with the upper frame image inserted inside, and then a with the image inside followed by two paragraphs, one with the description of the image and the other one with the lower frame image. I think that is better to put all the image elements inside another div, so they become a single mixed element.

    Divs are more “style-able” by CSS than paragraphs and also with this solution, I think is difficult to the frames to “kick out” the images when they doesn’t fit. Although the best solution, is as Nate said, to do the digital composition in something like Indesign. It will not be possible for you to print final PDF’s from WP anymore. You know that you can count on us if you need any help with this.

    Congratulations for this excellent book, which I’m already reading.



    Note: comment slightly edited by Tony Bates.

    • Many thanks for your comment, Gladstone.

      I agree, that when I started adding images, I should have used software that embedded the frame with the image. The frames were added quite late in the process.

      Also I was so busy writing the book in the html version that, while I checked regularly the look in the published html version, I didn’t export into the other formats until I had finished the final draft. The problem is that exporting from Pressbooks is an all or nothing process. You can’t just export a specific chapter or section to see what it looks like in other versions. Any attempt at re-editing for other versions thus becomes incredibly labour-intensive.

      I think that the designers of the software for open textbooks should develop a version for authors who do not have institutional support in terms of graphic designers and software developers. I am less worried about pdf versions not looking professional, but it is critical that versions for mobile devices such as iPads and e-readers ‘fit’ properly.

      If I was starting again, I would design for mobile use from scratch, but that it not the default format for creating text in Pressbooks.

      However, the whole point of the exercise was to learn these lessons – it’s always easy to be wise in hindsight!

  4. Thanks Tony, I agree this is an iterative design process and that the whole point of the exercise was to learn these lessons. Consulting with textbook developers and Authors/Editors/ who are expert users of Microsoft Word online cross-platform collaboration would be a place to begin . . . ” If I was starting again”.

    I understand the dilemma Clint describes and suggested outsourcing the design and production of print edition textbooks to those with the necessary design skills and software experience.
    There are usability issues with the current pdf design, type style, point size, column width, single continuous page layout – and ultimately it is difficult to optimize framing the content on the page for reading on screen – a pdf has value to some as an offline reader option. Other considerations, the pdf page size could be resized and contents paginated to suit the screen sizes of users – [pdf can be enlarged in printing, scaled up pages, sized to fit your 8.5 x 11 copier]

  5. Two obviously differing comments above about the future of print/pdfs.
    Although it does nothing to solve the problem to say this, the graphics issue is an example of differing technology standards. At some point, we need to be able to use the same platform to create materials in one step for a variety of devices, including laptops, mobile phones, and e-book readers.
    Just being able to export material in different formats is not enough, although it is still something. Whatever format is used, the material must look good and be consistent. If pdfs can also be included that would be even better, but to me that is less important than ensuring it works equally well on all mobile devices.
    While authors can do some things such as keeping graphics as small as possible and avoiding free-standing frames for images, this is essentially a technology problem that needs creative software designers working in collaboration with graphics designers and authors, and in particular common technical standards for mobile devices.

  6. __I agree, Tony, the goal is to communicate well. . . well written, well designed, well produced.
    I also agree with Clint and 21stCenEducator, likely very few people will use the pdf to print this book.
    Credit due to Authors-Editors-Designers-Producers working in educational publishing who collaborate to create visual communications in multiple screen & print formats, while overcoming the type of technical issues being discussing here.


Please enter your comment!
Please enter your name here