I've been doing a bit of research on the ePub 3 format as I am planning on archiving some older magazine and newspaper scans and want to craft some ePubs as a learning exercise. I also want to understand this stuff in order to help develop a JavaScript ePub reader.
I have a magazine that includes a 3-page poster in it, but I can't get the spine(s) for the poster to render properly.
I've tried using properties on the spines:
<itemref idref="034" properties="rendition:page-spread-center" />
<itemref idref="035" properties="rendition:page-spread-center" />
But, iBooks on OS X and iPad display this as regular pages in-line with the rest of them. For example, pages 34 and 35 should be displayed as individual pages, however they are being rendered with 34 on the right of 33 and 35 on the left of 36.
Am I misunderstanding what the page-spread-* is supposed to do?
I also tried using page-spread-left for both of them, to no avail. Ideally, I'd have the poster broken up into 3 pages (e.g. 034-a, 034-b, 034-c) and have the reader render a 3-page spread (page-spread-left, page-spread-center, page-spread-right), but I don't believe that is how the IDPF spec is defined. That is why I'm trying to figure out how to just display a single spine in the middle of a spread layout. (I've also tried removing the spread meta property depicted below).
Here is some additional information regarding my custom ePub file:
Package (OPF):
<package prefix="rendition: http://www.idpf.org/vocab/rendition/#"
...
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:spread">auto</meta>
com.apple.ibooks.display-options.xml:
<display_options>
<platform name="*">
<option name="fixed-layout">true</option>
</platform>
</display_options>
I am definitely no expert here, only started coding recently.
But I feel like a 3 page spread is unlikely but I have a suggestion:
Use a program, like Photo Standard(dont know if that is a popular one people might know) to cut the middle page of the spread in half
and then add the halves to the the right and the left pages of the spread, respectively to their own place.
So it is like only two pages to the e-reader, but visually it is three.
Maybe it will work, not really sure if that is really related to what you are asking.
Hope it helps.
Related
I'm using the ThtPanel component from the HTML Component library (version 4.5) to create icons in my application.
On Windows everything looks great, but on Android the same icons are rendered incorrectly.
For example if I set the HTML property of the ThtPanel to something like this:
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:30;stroke:rgb(0,0,0)" />
</svg>
The output on Windows is this:
But on Android it looks like this:
This problem makes all my icons on Android look low quality. I tried messing with the properties on the ThtPanel, but couldn't get it to work.
Without being able to reproduce this I'm pretty sure this is just a misunderstanding and happens often with markup, especially in the context of web documents: if you don't define it then you cannot have expectations.
While the average experience must have reached you that different web browsers slightly differ in what and how they render websites, the culprit is that they have different engines to interpret your markup and then to render the optics out of it. However, it is quickly forgotten that web browsers come with configurations and these can change - either on purpose (every font by default should be a serif) or with slightly unexpected results (because websites always expect that the default font is a sans-serif).
Long story short: your SVG rectangle nowhere defines how edges at the end of strokes should be drawn. As per SVG 13.5.4. Drawing caps at the ends of strokes: the ‘stroke-linecap’ property you should define
stroke-linecap: square
...while you already defined stroke and stroke-width.
Try that first and load it in different browsers/engines - I'm pretty sure it makes a difference. Note: Windows is neither a web browser, nor a rendering engine. And so is Android. They can can different web browsers/engines.
I'm new to Orchard CMS and MVC so please forgive my ignorance. I've done a search and not found anything apparently relevant....
In one of the Footer Quad zone on my Orchard site I want to show the 5 most recent blog posts, just by title. At present it show the title, post, tags etc all in their unformatted state(Ive not style the blog yet).
Using the tracing tool I've created an alternate view called;
Parts.Blogs.RecentBlogPosts
However the only content in this view is;
#Display(Model.ContentItems)
Which -unlike other installed widgets Ive edited alternate views for- doesn't give me anything to play around with to create the layout I'm needing to create.
Have I selected the wrong shape / view, or do I need to get stuck in with some coding???
As I say, I'm new to both MVC and Orchard but very keen to learn. Any help on this will, as always, be greatly appreciated.
I got the exact same problem while trying to differentiate recent blog posts layout from blog summary posts. I followed this concept
http://weblogs.asp.net/bleroy/archive/2011/07/31/so-you-don-t-want-to-use-placement-info.aspx
and created Parts.Blogs.RecentBlogPosts alternate. Then while navigating through the model using shape tracing tool I found all elements I was looking for and put them in my new shape. I know that my approach might not be the most appropriate one but it works. Maybe it would be a starting point for someone who would need to do similar thing:
<div class="last-news">
<ul>
#foreach (var item in Model.ContentItems.ContentItems.Items)
{
var max = (item.ContentItem.BodyPart.Text.Length > 100) ? 100 : item.ContentItem.BodyPart.Text.Length;
<li><header>#Display(item.ContentItem.CommonPart.PublishedUtc.ToShortDateString())</header></li>
<li><h1>#Display(item.ContentItem.TitlePart.Title)</h1></li>
<li>#Display(Html.Raw(item.ContentItem.BodyPart.Text.Substring(0, max)))</li>
}
</ul>
</div>
It does deserve an explanation. Model.ContentItems here really is a List shape. When you call Display with it, it will locate the most appropriate template for a list shape (and that can be an alternate) and renders it. The default List rendering just renders UL/LI and in each LI calls Display on the individual Content shape for the list element, but with the Summary display type. When that in turn gets rendered, the system locates the most relevant Content template, which usually renders a bunch of zones, inside of which the parts get pushed according to placement. So there is a lot going on, in quite a few nested levels.
Still, it is possible to override the whole thing at any level. The difficulty is to know what to put there. The easiest for this is to explore the Model in shape tracing and see what you can use.
This article shows how to override list rendering in a particular situation and take it over entirely:
http://weblogs.asp.net/bleroy/archive/2011/03/27/taking-over-list-rendering-in-orchard.aspx
The Parts.Blogs.RecentBlogPosts view displays Parts_Blogs_BlogPost_List shape (Parts.Blogs.BlogPost.List.cshtml) which displays BlogPost content items. (You can see it in RecentBlogPostsPartDriver.cs). BlogPost content type consists of TitlePart and BodyPart parts which has their own shapes and views (or templates in Orchard terminology).
So to make some corrections for those templates you could try to alternate Parts_Blogs_BlogPost_List, Parts_Common_Body_Summary and other shapes.
Please see the following instructions on Orchard docs page especially:
Alternates
Accessing and Rendering Shapes
I've been writing some tutorials, and I'm trying to figure out an elegant way to add line-by-line annotations to the code in the tutorials.
For example, suppose I have some code like this:
<h1>Demo of web page</h1>
<p>This is a paragraph</p>
I'd like to be able to add something (maybe a tooltip or some kind of lightbox effect) that allows me to present an explanation of each line to the reader, while still letting them see the line in context. The best I've been able to come up with is prose explanations that say things like "The line that starts with <h1> is a headline."
Anyone ever seen something like this?
You might want to check out docco:
http://jashkenas.github.com/docco/
It's written in CoffeeScript and generates an HTML doc from a source file breaking up the comment sections and the code. It sets up the comments as annotations for each section in one column and the corresponding properly highlighted code in the other column. I think it's a great simple way to grok annotations while keeping the code in context. Oh, and it also knows markdown.
What about using title attributes?
<h1 title="your hover text">your text</h1>
I think I might have found something to rival Docco: the popover feature of Twitter Bootstrap: http://twitter.github.com/bootstrap/javascript.html#popover
I'm not sure that it will actually look good, but it seems like a good start.
Old but good question, I was searching for similar things when I found this. There are tons of ways of doing HTML annotation, see this article for a very nice listing and explanations.
If you want annotation that simply tells the user what each line does, I would write HTML comments for small pieces of code, and larger external annotations for large amounts of code. You could then parse them using custom JS to show prettier boxes if you so wish.
<h1>Heading</h1> <!-- A heading element -->
<p>paragraph</p> <!-- A paragraph element -->
<p>Paragraph with
<b>Bold</b> <!-- An inline Bold element -->
text</p>
For larger amounts of code, I would consider using something like the documentation that Docco creates. Sure, it's for JavaScript but who says a similar one can't be done for HTML. As this was tagged with jquery-UI, you also might be interested in a jQuery text annotater.
This is driving me round the bend. I'm a long time VB.NET forms developer, quite new to ASP.NET and completely new to MVC. I'm creating vbhtml pages that use the VB.NET Razor syntax, and I seem to be constantly fighting against the UI which is trying to indent my code incorrectly. Take the following example, based on the template page for a new Razor view:
#Code
Layout = Nothing
End Code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
#If True Then
#<ul>
#For x = 1 To 2
Next
</ul>
End If '<-- Randomly indented too far
</div>
</body>
</html>
In the above example, as soon as I hit return after Next, End If two lines below randomly jumps two tabs forward from where it should be. In other examples I've hit a circle where pushing one line to the correct place throws another line out of position and vice versa.
I'm so annoyed at this point I'd be happy to disable auto-indentation completely and just manage it myself, but I can't even find out how to do that! Following advice on another thread I disabled indentation for HTML pages but all that stops is indentation of HTML tags - the code blocks still slide around all over the place.
I thought an extension might be causing the problem but I disabled them all and restarted and the problem remains. Am I doing something fundamentally wrong? I find it hard to believe Microsoft would release something so poor so it seems more likely I'm just not using it right.
I found a solution (of a fashion) on another question (I really did search hard before posting this question and couldn't find anything): Why doesn't Visual Studio code formatting work properly for Razor markup?
Essentially the solution seems to be to ensure that your code uses spaces instead of tabs for the whitespace. Whilst increasing the overall size of the page because of increased whitespace, it does lessen the problem (whilst not eliminating it completely). On the linked thread, someone who appears to be connected with Microsoft has acknowledged it is indeed a bug related to the overlapping formatters for HTML and VB.NET which they hope to improve in a new release. I've dropped to 2 spaces per indent to lessen the bandwidth impact.
Thanks to the guys who contributed.
A better alternative here(rather than using spaces for tabs), is to change the block indenting for HTML and C#/VB to "Block" instead of "Smart". This isn't a full solution, but IMO is a far less painful work-around than using spaces!
Is there a way to get struts 2 (using tiles) to build the whole page before sending it to the browser? I don't want the page to be build "progressively" in the browser one part at a time.
The main problem I'm trying to solve is that internet explorer 7 flashes/blinks the page even if only some of the content changes (firefox does this much more smoothly).
So that if I have a page with:
HEADER
some content
FOOTER
And the "some content" area only changes between page loads, the FOOTER part still flashes the white background before filling it with the background color of the footer. I tought that maybe by getting struts to send the complete page it would load fast enough to eliminate the "blinking".
Now the FOOTER comes from the server a little bit later than the parts before it and so it flashes (in internet explorer, firefox displays the page smoothly).
NB: this is an important requirement for the site, and using ajax to load the middle content is out (as are frames or other "hacks"). The site is built using CSS and not a table layout, maybe I will have to use a table layout to get it to work...
About using tiles flush parameter:
I tried that and it doesn't work as I need. I would need a flush-parameter for the whole page. I have tried the normal jsp page directive "autoFlush=false" but it didn't work. I set this directive on my main template page (and not in the tiles).
Here is an example from the main template, which uses header, body and footer templates. With the Thread.sleep() I added the problem is easy to spot. The footer renders 2 secs later than the rest of the page.
<body>
<div id="container">
<t:insertAttribute name="header" flush="false" />
<div id="content"><t:insertAttribute name="body" flush="false"/></div>
<div class="clear"></div>
<% Thread.sleep(2000); %>
<t:insertAttribute name="footer" flush="false" />
</div>
</body>
UPDATE
Thanks for the comments. The requirement is actually almost reasonable as this isn't a normal web page, think embedded.
But apparently there is no way of configuring IE to start rendering after some delay (like firefox has a configurable delay of some 100ms)?
I tried to intercept the TilesResult but the method doExecute is run before the whole content is apparently evaluated, so the method has already exited before the jsp is evaluated (my Thread.sleep() test). I was wondering how I could render the whole response to a string and then output that all at once to the browser.
I know that this isn't foolproof and network delays etc may factor in this, but if I could get the response to output all at once and maybe use a table based layout (IE possibly renders the table only after the table closes) this could work reasonably.
Or then try to get this switched to firefox or maybe forget all about this little glitch...
UPDATE 2
This started to bother me so I did some investigation.
If I had a plain jsp page (no tiles) the buffering works (with the buffer attribute), so that if I had my Thread.sleep() there the whole page rendered after two seconds if the page size was below the buffer size.
But if I used tiles in the page (as in the example above) I couldn't get the page to render at the same time (I even included the page directive in all my tiles-templates/"components", no help). So tiles probably flushes the response somewhere?
Furthermore, the "problematic tiles" was my body-part, which contained a struts:form tag. I replaced it with a normal form-tag and it worked as I wanted...
UPDATE 3
Ok, nobody seems to know the inner workings of tiles or struts tags...
No big problem as this is a very specific case and requirement.
I worked around it by using apache as a proxt in front of the application, and using apache's proxy configuration options to specify a large buffer.
I'll mark this as answered.
You can send page data all at once at the server end if you like (and many frameworks do that anyway for convenience) but the reality of networking is that it won't all arrive at once and the browser will render it as packets arrive. And this is a good thing for responsiveness, even if you* aesthetically would like the page to display all at once.
You can reduce the lag as much as possible by simplifying markup and using deflate compression to keep the payload size down, and that's a worthwhile thing to do in general. Plus you can make sure you're not hitting a Flash Of Unstyled Content. But you can't control when the browser chooses to render, short of doing it all in JavaScript with all the downsides that entails (and even then, the browser might redraw slowly).
(* - or your client/boss, if that's who has come up with this "important requirement" that your site somehow work differently to every other page on the web.)
Can you use the "flush" attribute on the tiles components?
<tiles:insertAttribute name="body" flush="false"/>
In addition if the output buffer gets too big, it will flush anyway. Try increasing the buffer size?
<%# page language="java" buffer="500kb" autoFlush="false" %>