Magazine not fitting

[MaverickWar]

I finally have the shelf how I want it, but now I'm having issues with my magazine not playing ball, I have bought in5 but still can't make everything fit iPhone and iPad, it's better with pulling the width in than the height, I have about an extra half scroll of height.

Also some pages are getting cut off and others have blank spaces, is this a magazine format issue? If so what can I do to fix, the magazine was made in A4 print, do I need to convert to digital format and if so, is there a quick way to do it with minimum changes.

Thanks guys

[nin9creative]

An A4 template I don't think would work.  You need a magazine template that fits the iPad or iPhone pixel dimensions.

---

From: MaverickWar notifications@github.com To: Simbul/baker baker@noreply.github.com Sent: Thursday, July 18, 2013 4:24 AM Subject: [baker] Magazine not fitting (#1025)

I finally have the shelf how I want it, but now I'm having issues with my magazine not playing ball, I have bought in5 but still can't make everything fit iPhone and iPad, it's better with pulling the width in than the height, I have about an extra half scroll of height. Also some pages are getting cut off and others have blank spaces, is this a magazine format issue? If so what can I do to fix, the magazine was made in A4 print, do I need to convert to digital format and if so, is there a quick way to do it with minimum changes. Thanks guys — Reply to this email directly or view it on GitHub.

[Appmantx]

There are alot of templates that will work here http://graphicriver.net/search?utf8=%E2%9C%93&term=indesign+magazines

[ghost]

I'm also having this issue. My base magazine is 1536 x 2048 so looks great on iPad but iPhone gets cut off...

What dimensions should I start with?

Or is this a CSS issue, if so what do I place in there to make it work?

[MaverickWar]

I still havent figured this out yet luke, it seems most people are designing for iPad and so iPhone assistance is harder to come by.

[ghost]

Ideally I would be happy to scale the iPhone down so it fits width wise and has empty space at the top and bottom so it stays in proportion.

Any thoughts on how I would do this in the CSS. I'm thinking something like:

Margin top: auto; Margin bottom: auto;

But not sure if it would work or how to scale the iPhone only version?

[folletto]

In5 outputs pages pre-made based on InDesign. This chain of tools creates some limits in the HTML5 In5 can generate.

The way the pages for iPad and iPhone should be done is through Responsive Web Design, and that's the reason why it's difficult to come up with answer that implies InDesign (limited in its format) and the dynamism you must have to support multiple devices (Responsive). In a general sense, going more than iPad with InDesign means finding a lot of problems.

[MaverickWar]

Surely though with the amount of money invested in both indesign and in5 as a plugin, this should be sorted, there shouldn't be these issues, the in5 plugin should be more than capable of fixing these things....

[folletto]

The problem isn't In5. The problem is InDesign. You're using a tool with inherent limitations and thus there isn't much that any exporting could do. Probably something could be improved, but not solved. If you study Responsive Web Design you'll see clearly why.

[MaverickWar]

thats great but the vast majority are not all web designers, some use indesign to create a magazine but have little to no coding knowledge and they really shouldnt have to, indesign was built to make pdf, so if what your saying is that indesign doesn't export well and in5 wont help, no web or tech people are screwed....

this seems a little unfair. also if in5 wasn't able to make a magazine fit perfectly within an iPhone scale out of the box then they really should have specified this prior to sale. Im not impressed that i invested all this money and still cannot get the end product ive paid to get.

[folletto]

Well Baker uses HPub and that's HTML5, so the assumption is that you will deal with HTML, there's little you can do about it.

In5 is one of the tools that helps people with little HTML knowledge to get it through, but that said, it does what it's meant to do: export a InDesign page to HTML. Now, if you want to stretch InDesign, and thus, In5, to export for iPad and iPhone and iPhone 4", the person that is hoping for something impossible that In5 doesn't advertise (nor InDesign, that has individual fixed-size pages) is you, not them.

An InDesign magazine has very clear and evident limitations, and expecting the same results of a native HTML5 magazine is a bit far fetched. There's a reason why people don't use InDesign to do websites, the same is valid for HPub that is clearly a microsite.

I'm sorry if you found yourself in this situation. The solution suggested above by @lukeallen1986 above is actually a clever one that works around the issue, try it. Set a CSS rule to add a new style when the magazine is viewed on iPhone (using media queries) that resizes the image and adds padding.

[MaverickWar]

so i just drop those 2 lines anywhere in the css and it will work? which css file does it go into to?

[rlarrett]

I have the same situation - mainly a designer, with limited coding sills, using In5 to export to HTML5/Baker. This has not (yet) been a problem for me, as I am creating an iPad-shaped magazine only. However, ID from CS6 on has responsive design tools, and it should be possible to design pages that will rescale to the iPhone. It should even be possible to add Edge animation, which can also be designed to rescale, now that IN5 will export Edge animations. Though I haven't had a chance to try this myself, so I don't know how effectively In5 exports the responsive IN pages.

[ghost]

Yeah @riarrett I'm using in5 to export from ID. It works pretty well but there are a lot of bugs.

In regards to scaling I have selected all the elements in my page and chosen "liquid layout = scale" so in theory they should scale down. I have also ticked the "full device width" and marked zoom able = true in the baker Json file. Despite all this the page still doesn't fit well on the iPhone (it looks out by about 30-50 px, so I'm going to try what I mentioned above to get the CSS to do the work..

If anyone has some CSS experience and could help with this situation that would be super

[ghost]

any luck with this @MaverickWar ? I tried but I suck at CSS so much I can't figure it out

[rlarrett]

Ah, @MaverickWar I get it now. And I am keen to hear how it works for you. The problem with InDesign-In5 export is that the code all happens "under the hood", so the output is a total dog's breakfast, almost impossible to figure out, much less edit. I was thinking it might be easier to do it in Dreamweaver, where they have responsive page templates, and you can get a better look at what's going in the CSS and adjust as needed.

[justinputney]

Hi rlarrett,

As the creator of in5, I am biased to think that in5 output is not "a total dog's breakfast." Since I've done all the work to create the code, it makes total sense to me. ;-)

Here are some tips to work with the HTML/CSS generated by in5: 1) Use Firebug or the built-in browser inspection tools. You can locate specific items very quickly by hovering over them visually (see screenshot below). 2) The basic structure is as follows: the pages are list items in an unordered list (ul). Inside each page, all of the items from the page are listed based on their stacking order (back to front). This allows every item to be shown properly without the need to add extra CSS to set z-indexes.

That's basically it. Really simple items may have inline CSS. Most items have CSS selectors (in assets/css/pages.css) associated with their id attribute (again, very easy to see with a browser inspector).

Absolute positioning is used to position the items on the "page" to match the InDesign layout. Almost every item inherits from the "pageItem" class to reduce the amount of CSS needed.

Hope this helps with understanding the code.

[justinputney]

Regarding the original query: @folletto is correct. If you're able to export for iPad and iPhone and iPhone 4" without extra work, then you are quite lucky.

Depending on the design you may be able to use some or all of the following mechanisms to export a single InDesign document to all of these devices:

1. Liquid Layout - this is supported by in5 but requires finesse and is limited to the features available in InDesign (you'll have to actually add settings and test the layout, simply setting the Page Format to Liquid will not automatically produce the desired outcome).
2. Viewport Zoom - this can be set in the in5 dialog to scale your design to the device.
3. Use the Resources tab to attach custom CSS, like media queries (for advanced users).

The design won't know how to scale, if you don't tell it. That's where design skills are required. Some (read:most) designs will require separate files for separate devices/screen sizes.

[folletto]

Thanks @justinputney for your contribution! :) It's greatly appreciated. :)

[justinputney]

@folletto Happy to provide info!

[rlarrett]

Hi @justinputney, and thanks for your gracious response to my rude remark. I am firstly a designer, very far from a wizard at CSS and Javascript, which is why I need in5 in the first place. And it's great! It has done everything I require for fixed-page layouts, and I'm hoping to use it on a responsive Baker design soon. With your advice in hand I will try harder to make sense of the output, should it come to that.

[MaverickWar]

I've temporarily abandoned in5 and indesign because I can't seem to get it to display nicely on the iPhone 4/4s devices aswell as iPad and other tablets.

Anyone that has any success, could they please write down the steps here.

Also to justin, is there anything you could do to make this a tighter and more Seamless transition to multiple devices?

[justinputney]

@rlarrett thanks for your nice response back. Feel free to contact me if you have any questions in the future. I'm always happy to entertain ideas for video tutorials as well.

@MaverickWar we're looking into the possible of supporting alternate layout detection in the future (exporting all layouts and detecting which one needs to be shown). If you're familiar with JavaScript, this wouldn't be terribly hard to write by sniffing out the userAgent. If you're exporting to Baker, why not export and compile a separate file for the iPhone. If you've already created an Alternate Layout in InDesign, it seems like only a few more minutes work to produce a separate Baker app (since the Baker team has done such a good job pre-baking everything for you).

[MaverickWar]

Yes I did create alternate layouts but I have no idea how to separate each layout for a separate export iPhone or iPad. Also do you mean upload to different versions to the apple store? iPad and iPhone?

[ghost]

@MaverickWar Yes you would need to create a separate iPhone and iPad app in iTunes Connect. To output it in Indesign all you have to do is go EDIT > EXPORT HTML WITH IN5 > EXPORT RANGE and select which layout you want to use.

BTW @justinputney that viewport code seems to affect the index.html [i.e the navigation bar] and once its hidden the first time it doesn't come back when "double tapped"... I didn't realize this before I closed the thread [sorry]

Any idea how to fix this?

[justinputney]

@lukeallen1986 is the index issue resolved when you remove the viewport metatag?

[ghost]

@justinputney hmmmm good point... no actually, which makes me think its an iOS 7 / Baker issue, because nothing else has changed.

Would that be correct?

[folletto]

Mind that we have no control on what happen inside the page, apart from a few events we can inject. It's an Apple native component, UIWebView, and as such if there's a solution, it's a solution on the page HTML/CSS/JS.

The only extra thing that happen in index is the automatically resize of the window to match the content, but even that depends on what's inside the page.

[ghost]

@folletto what is strange is this is only a problem on the iPhone.. the index.html on iPad running iOS 7 seems to be fine...

[folletto]

If you think it's a separate issue and on the Baker side then follow Problems and Debugging on the wiki and open a new issue with step-by-step instructions on how to reproduce it. :)