In PDF generators you can normally describe a bounding box where if there is overflow it goes to a new page and you can include the content that wrapped it again.
I'm trying to figure out how to elegantly do this in Wicked, since we have a new requirement to allow users to generate their own PDFs from HTML.
The layout is roughly as follows:
[ address / logo ]
[ list of items purchased ]
[ footer ]
All the regions are a fixed size. With a handful of items there is no issue. If there are more than will fit in the region designated for the items purchased it cannot overflow. It needs to generate a new page break and put the overflow items on the following page (with the same header and footer wrapper).
I'm not sure there is a way to get a div's overflow to paginate like that in CSS though. (Prawn can do it, but it doesn't accept HTML). I don't know that something is going to overflow until it's rendered too, just knowing the count of items isn't enough.
Webkit doesn't really have good support for page breaking. I found out from their own page: "The current page breaking algorithm of WebKit leaves much to be desired.
Basically webkit will render everything into one long page, and then cut it up
into pages. This means that if you have two columns of text where one is
vertically shifted by half a line. Then webkit will cut a line into to pieces
display the top half on one page. And the bottom half on another page. It will
also break image in two and so on. If you are using the patched version of QT
you can use the CSS page-break-inside property to remedy this somewhat. There is
no easy solution to this problem, until this is solved try organizing your HTML
documents such that it contains many lines on which pages can be cut cleanly."
Related
I'm Struggling Illustrating "Divs" in PDF-KIT module
I Can't find a way solving the "div's" fitting perfectly in one page without breaking in the middle
I Attached a Picture with the PDF result -
the thicker "div" selected
is the corrected way that I need to present it
and the thinner one is the broken one that the header is in another page than content
Many Thanks for You Help !
I have a webpage whit many areas whose visibility can get toggled by the user.
The default visibility state for those area is hidden (css, display: none).
I don't have control to what's going to be put inside, but it could be a lot of images.
I saw with firefox's network observer all images where loaded with the page. This is quite a waste of bandwidth since the user might choose not to display every areas.
I came to a workarround, I put all that content inside a <script type="late-rendering"></script> and to avoid any potential conflict (eg: "" inside the content), I replace all "<" with "8691jQfdtxm" (randomly picked string). Then when the user want to make an area visible, I just fill the area with that content after replacing 8691jQfdtxm with "<".
It works fine, but I think proceeding like this will make crawlers (eg: Google) think my webpage is pure garbage. How could I avoid that?
Unless search engines were heavily relying on the alt tags of your images, or their filenames, there is little risk you will loose search rankings. If your site does load more quickly instead, it will provide a better user experience, which will be probably detected by Google, and this influences rankings positively.
Google executes a lot of Javascript these days. And your trick of breaking the html with a random string seems hokey to me.
I would preload all the textual content ( e.g. have it all in there on first load, with the div closed via display:none ). This content will not count as much as visible content - but it does count.
Then I'd do a delayed loading of the images. Like with make all your images something like:
<img src="blank.jpg" loadlater="realimage.jpg">
blank.jpg can be a tiny image. when the div opens you can use javascript/jquery to rewrite each src with loadlater.
I'd like to include a picture in a page element in an Inquest script: is this possible?
If so, how would you do it?
I know this question was asked 8 years ago...but I recently had the same question. So I thought maybe I could put something here in case someone in the future would have a similar question.
You cannot add a picture to the page element in Inquisit 5, but it would be possible in Inquisit 6. For Inquisit 5, you'll have to use or .
Here's some discussion on this: https://forums.millisecond.com/Topic34836.aspx
There is some discussion here.
In general, it seems that the page element only allows for simple text based instructions.
If you want to present images in instructions, there are a few options.
htmlpage element
You can use the htmlpage element, which allows for instructions to be a complete formatted HTML file that can include images.
The htmlpage element is used to define pages of text to be displayed
as instructions using the preinstructions or postinstructions
attribute. The htmlpage element is useful when complete control over
formatting and content of instruction pages is required, otherwise the
page element provides an easier way to display text with basic
formatting. The actual content of the page is contained in a separate
HTML file located on the local machine or the web. source
Picture or picture and text in a normal trial
The other option is to present instructions as normal stimuli in the main trials of a block.
See for example, the instructions in the sample script for the Iowa Gambling Task.
This can be either done as one integrated picture that includes text, or each image can be positioned as it's own stimuli.
I am grabbing text data from XML files, and want it to display in book page-like format inside a UIWebView on iPad. The XML files are coming out of a .epub, and each one contains a single chapter of a book, divided up only by p tags.
I want to dynamically paginate these files into book-like pages based on the size of the UIWebView, which is a full iPad screen, as well as by user-selected font size. I am currently loading a blank html page with related css into a UIWebView, grabbing paragraphs based on number of characters as Strings from the XML, and printing these into the html using StringByEvaluatingJavaScriptFromString and the innerHTML property.
Obviously, doing this by number of characters creates improperly spaced, oddly formatted pages, but I'm not sure how else to "paginate" the text.
What I am looking to do is something akin to the app "eReader" on iPad:http://www.ereader.com/. They seem to be breaking a single file up into pages dynamically, and loading it into UIWebViews. How is this done?
Most EPUB readers that are based on UIWebView simply use CSS3 Columns to paginate the document.
You can see this in action at http://www.quirksmode.org/css/multicolumn.html
The basic idea is that you 'columnize' the document and then scroll horizontally through it to show a specific page.
Having done this for one popular (Canadian) eReader application on the iPhone and iPad, I can tell you that the technique works but that it is far from ideal.
The code is already made. It is called epubjs. It is Javascript only epub reader.
Use UITextView with PageviewController . (specify your doubts in it , if any )
Google image search seems to do a poor job on a site I run in identifying which image on a page should be indexed. In addition it doesn't seem to link that image with lots of the associated data.
Are there any ways of focusing attention for spiders on particular images and associated data, do they need to be within the same tags, or adjacent on the page?
A few tips:
Use a descriptive name, i.e. "tabby-cat.jpg" instead of "img02396.jpg".
Use alt tags on images.
Use descriptive text on the page and around the image.
Make sure the images are in the generated source, i.e. if you click "View source" in your browser, you see <img> tags.
It's also useful to validate your site at http://validator.w3.org in case there are major errors like missing brackets etc that could prevent a spider from parsing the page. (Note: I wouldn't worry about making everything 100% valid since Google is fine with invalid code)
Images in CSS (i.e. backgrounds) are not indexed AFAIK. However I'd suggest using CSS backgrounds for "design" images (a subtle way of getting Google to ignore site headers, custom borders, shadows, etc).
Nor are any images generated from Javascript.
Make sure you're not blocking images through robots.txt. I know that Joomla does this by default.
Sign up at Google Webmaster Tools, add your site, then allow it to be used in Google's "Image Labeller" game which should help tag images.
All images on a page should be indexed. If they aren't then improve your alt tags and possibly rename the image file. There really isn't anything more you can do since search-engines do not read any other context for the image itself except size. If google thinks the image is a duplicate it won't index it either.
Of course if images really do inherit context from the surrounding page then you could just use less images or move them into CSS.
I think Search robot can not read images as we do, so the simple and must thing you should do to your images is using descriptive names, so that spider could know what this image all about. Second one is using ALT tags on images, put in keywords relating to the images.
Those thing are what I do.