I am working on an ePub3 and I created an interactive document that requires the full page to really look how it should. Unfortunately when I compile it with Readium to test the functionality in the ePub it shrinks it to one half of the viewport and leaves the other half empty (because it is, after all, a book).
I googled around and messed with the CSS and DOM and I cannot figure out how to remove that extra, unused page and make the one page with the interactive app take up the entire viewport.
Does anyone know if this is even possible? I know it might be pushing the standards of the ePub, but this app is a huge part of the ePub.
I appreciate any advice that can be given!
This is a reader-specific display function (not an ePub3 function), so you won't be able to control it. It is similar to what happens on most tablets if you turn them to read in landscape mode... The thing is, many readers don't read in this mode but some do, and you wouldn't want to take that ability to choose away from them.
If you are doing this in a reflowable book, I would suggest having the App be on it's own fixed layout XHTML page so that it is full-screen (on tablets) at least. You can do this by creating the new XHTML page and putting a link to it.
The best visual solution I can see in Readium isn't really a solution, but you should just go to "settings" and read in single page mode and possibly have a tooltip recommending that to readers when they get to the app.
Best of luck!
Related
Is it possible to determine the order of HTML elements read by a screen reader (like TalkBack or VoiceOver) regardless of their position in the DOM? I'm wondering if there is an id, an HTML attribute like "voiceindex" (analogous to tabindex) or another option to control the sequence. The corresponding webpage is embedded as webview inside the app. Therefore I don't have access to native Android or iOS code.
No, there is no attribute or anything like you describe to control the reading order of a web page.
Something like this exists in PDF and it's a big mess; for sure it was a very bad idea, making PDF accessibility quite complex.
A web page is read in the same order as elements appear in the DOM and this is always so, regardless of your CSS.
It ahs a great advantage over having to manually specifiy an order: it's simple, you just have to structure your web page using structural elements appropriately; then, to verify that it makes sense for a screen reader user, just read your HTML code from top to bottom and completely forget about visual placement.
This later exercise is widely known as linearization; that's basicly what screen readers do and how screen reader users perceive web pages
If the exercise isn't convaincing enough, imagine that you have recorded your page on an audio CD. You can listen to each title one after the other, or jump directly to the beginning of a track, but not easily jump directly to the middle of a song.
Jumping to the beginning of a track is a metaphore for the jump to next heading or next section of screen readers. Selecting a track from the tracklist is also possible with screen readers as most of them provide a list of sections or headings to jump to.
With the hope that this image will help you structure your page well for screen reader users, and why you should carefully think about it. This was in fact certainly your foundamental problem when you posted your question.
I'm interested in writing lots of HTML5 apps for devices with e-ink (bistable) screens.
But bistable screens exhibit a lot of strange and disconcerting visual artifacts whenever the screen contents change, especially when the browser is drawing and redrawing the layout when a page is loaded or when some javascript modifies the DOM.
So.... is there any way for my HTML code to tell the browser and its operating system to hold off on redrawing anything on the screen until it's done figuring out the new layout?
It is probably a dirty hack, but you could think of putting a full page opaque white div on the top layer - and then remove it with javascript once the page is fully loaded
I'm very new to web design and just made a simple one page website for my iOS app here. I now want to make it so that when this page is opened on an iPhone, the whole thing is zoomed out enough because right now the right half of the page doesnt show. From my understanding and research so far, I need to use media queries and create a separate CSS stylesheet for mobile. However I feel like for such a simple page there should be an easier solution with some plug-and-play code. Something consisting of a simple conditional-type statement checking if the user is on mobile, and if so, gives the new dimensions of the page. I don't really know anything except for the very basics of html, css, and javascript when it comes to web development, so simple explanations would be highly appreciated.
I think you have to go for http://www.jquerymobile.com it is very good framework for mobile web.
Instead of creating a mobile-specific page you might want to experiment with the viewport meta-tag. The tag isn't used by desktop browsers, but it scales the size of what you see on a mobile device's screen. You can also check out Apple's guidelines for more information.
I'm working on a new web site that currently is configured as a full height (that is, 100% available browser window) application. In terms of layout, it is something like this - http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html.
Our web site does nothing with the actual browser window size, like switch browser into full screen mode. It only uses the available space.
Operationally, this is going to be a semi-internal data entry application. Almost all pages are data entry forms or summary pages
Personally, I think makes a very nice looking app. However, some of the other developers are comparing this design with content in scrollable tags to be the same as iFrames. And as such should be avoided.
Is there any background / best practices information about designing a web site this way?
I personally love sites that choose to do this; I think that it's a great way to use up the available real-estate that you have. My one piece of advice would be to add a min-width and a min-height to your page so that you don't have to worry about your site breaking if the browser gets too small. This will not only improve the overall user experience, but will also prevent future headaches when trying to get your design to work in obscure dimensions.
It looks fine, and at first looks more like a 'real' app. The only weirdness with this sort of thing is that on OSX you get a bit of a bouncy effect when you hit the top and bottom because of the rubberbanding on the scroll. If you aren't sure what I mean, grab an iPhone/iPad/Mac and scroll up and down past the top or bottom of the content.
In reality it shouldn't be too hard to enable or disable this feature, so why not start with it, then revaluate once you have gotten going.
There aren't any good practices or background information that I know of on this subject. Just follow the normal rules of thumb, if it looks good, is light and loads well, and it is usable, why not?
I know you can fake full screen by expanding a window and eliminating the title bar , status bar , and other stuff, I'm not interested in this, I want to know about "real" full screen mode (I don't know how to call it else) , like in games.
what exactly is full screen mode?
what win-api should I use to achieve this?
can this be used to play movies in full screen ? I know windows media player uses a fake full screen because I can "cut" thru it and see the desktop (using regions win-api).
can I "cut" thru "real" full screen like I thru a window (using regions win-api) ore is this directly writing to video memory and there is nothing "under" it?
Thanks!
If you want to make games on Windows in full-screen, the best option is XNA. This uses DirectX underneath, but hides a lot of the implementation details and plumbing to make it easy for the developer to start working on his game.
XNA is freely downloadable, and has good documentation.
XNA Game Studio 4.0 can be downloaded here.
...and you might want to support the "fake" fullscreen mode in addition to "real" fullscreen - it's very nice for those of us that run multi-monitor systems.
If you don't want to use DirectX, create window and call ChangeDisplaySettings with CDS_FULLSCREEN flag. OpenGL applications use this way to go fullscreen.
As far as a user is concerned, full screen is just when a window takes up the entire screen such that they no longer see any window borders or other desktop stuff.
As you know, not all full screens are created equal.
'proper' full screen is where the program takes control of the screen. When a game uses this mode, it can change the resolution of you screen. If you have ever played an old game and existed to see your icons all messed up, this is; for the duration of playing the game, your desktop was at a lower resolution.
with 'borderless full screen' the program window is striped of any borders, the title bar and frame etc., and is just a rectangle of pure rendering. If you then set this rendering context to be the same size as your desktop, you get the effect of full screen.
Doing border-less is usually the more user friendly way these days, as it is easier to 'tab out' as the other programs are still graphically around. 'proper' full screen gives you full control of the hardware, so in theory you have more power for your program, but it means you have to wait for things to reinitialise when you tab out.
what you do with your rendering context is up to you, so yes, you can use it play videos. It would not matter if you are in 'proper' full screen or not, the rendering code would be the same.
As for cutting through proper full screen windows, I am not sure, but I think there would be nothing else to see, there is only your program.
as for what win-api, there is only one windows api, but I think you mean, what windowing library; as this is getting to be a long answer already, I shall just say it depends a lot on what you want from it.
Please feel free to leave comments if you need me to clarify or expand on any points.