I would like to display the content of a HTML file,in the form of book with many pages(not side by side pages, but one after the other, like PDF), when opened in some browser. Say, i define page width=600px and height=800pz, the content should fit into one page and the remaining should overflow to next page and like that. And it should work for any HTML file.
How can i break the content into pages ? In any way XSL helps me to achieve it ?
This should be theoretically possible by putting the document into an iframe that is 800 pixels high, and changing the scroll position inside that iframe (Page 1 = 0px; Page 2 = 800px; Page 3 = 1600px ....)
The HTML page in question would have to be on your domain, though.
There is no proper way to actually display those pages side by side, though. You'd have to clone the whole document for as many times as there are pages, and display as many iframe s with the page scrolled to different positions.
Depending on what you want to do, it might be better to use a different technology for this (e.g. having a browser print out a web page to a PDF file, splitting the content into pages in the process.)
If you want PDF style functionality, convert the html on the fly into a pdf and then embed it in the page. You can specify the width and other params when you are generating the pdf.
Related
I have an HTML document that I need to convert to PDF. The problem is that I need to have some header and footer on every page of the converted PDF document.
Because content has a different size (some tables), I can't hardcode height.
The app is written using ASP.NET if that matters.
Can you please suggest some way to handle that problem?
I have dynamic HTML generated based on user entered content. I want to show that HTML as A4 pages. The content may span to any number of pages as it is continous.
A code pen like this one https://codepen.io/rafaelcastrocouto/pen/LFAes helps how to show html as A4 pages. This is quite good but my problem is that I don't know in advance how much content one page can have. Will the content be rendered in first page tag or two page tags or more, I don't know since this is user generated content.
<page size="A4">
<!-----Dynamic HTML comes here, can confine to this page or overflow out of that---->
</page>
How do I show html structured into multiple pages in this scenario?
I know a hint that it might be possible with use of Javascript or query to create multiple page tags and place html chunks inside that but I would prefer CSS way of doing it as JS mechanism is susceptible to inaccuracies due to calculation of heights.
Is that possible?
Also how about using page-break-before and page-break-after property of CSS. I have used that property but that renders only in PDF, I want to show that in HTML in browser, is that possible with that?
I have a website that I update some of it's content on monthly basis.
The content for those pages include tables in iframe format. Now when I search for that particular keyword i see that google is indexing my iframes individually.
Therefore their contents doesn't add any value to the main parent container.Below you'll see one the pages with iframe.
http://www.reguluspc.com/parts/case.html
I want to keep the content intact but keep the table in iframe and update the table only. To avoid duplicated content, I keep the iframe but it doesn't look good as it doesn't have any navigation or proper CSS file.
Any ideas how to make the iframe content to be indexed as part of the main parent page?
Cheers.
As these are two separate urls, they will be indexed as separate content.
Why are the tables being loaded from iframes? Do you have any server-side languages like PHP, JAVA, .NET, etc? Your might also have *.shtml which would allow you to do server side includes for content like that.
I'm using an iframe to prevent the CSS of user-provided content (converted .doc files) from bleeding out of an AJAX panel in my single-page application. It's the last item displayed, usually about 5 pages following 1 page.
It works visually in the screen application, where I have a parent-relative height and width to leverage, but I realized I couldn't actually get the iframe to print its entire contents with #media print declarations.
I've seen about 5 related questions answered 'not possible', but I'm more flexible than those askers. I'm willing to:
use javascript if it can format the print view without affecting the screen view. can you point me to an example?
I currently directly insert the iframe's html, so I also have a lot of control over its content.
to print the parent and iframe contents separately, if they'll queue seamlessly in major browsers' print managers - especially if there's a way to handle browser print events in this case?
as a last resort, I will probably print ONLY the iframe content, using the following. still would like to handle print events if it's possible cross-browser.
javascript:
window.frames["OverlayDis"].focus();
window.frames["OverlayDis"].print();
Assume you have 75 div's that have data-id="{some number}" attribute. The overall page size is unfortunately big, very big.
There are many repetitive HTML snippets in my HTML document like image tags or links. These images/links' only changing portion is the id.
The HTML document is quite long, these snippets contribute to the overall size of the document.
I can run a javascript when dom is ready, but the user experience will be:
- wait the page loads, and start seeing nodes etc,
- page loads,
- extra snippets show.
I can make the top container DIV to hide until the page loads but
- worried that google search bot could realize the div is hidden and skip the content (or does it?)
- the users won't be able to see the content while the page is loading.
What ideal is to load the page in HTML without much extra markup for google search bot, and add extra elements while it's loading with javascript.
Any tricks that I can try that comes to your mind to accomplish this?
Thank you.
The best performance and user experience is to do as much work as possible on the server, then send efficient HTML and allow the browser to display the page as it's received. Sending say a single DIV container, then using script to clone it 70 or 80 times will be slower (probably a lot slower for some users).
Hiding content completely until your script has finished is the worst solution - users are left with a blank (or minimal content) page, waiting for something to happen.
The vast bulk of most pages is script and images, replacing HTML with scripting really is playing at the margins. e.g. this page has 90KB of HTML and 264KB of script, images and css. Apple's home page has 12KB of HTML and around 800KB of script, css and images.
Browsers show content progressively as it's received because that's how they evolved over many years on the web. Users prefer to see something rather than nothing, and to start viewing content while the rest loads (it's all about the content, not about fancy layouts or effects). Try to work with browser behaviour and features rather than against them.
You can greatly help the browser by specifying sizes for images and having an efficient layout. That way the layout won't change much as new content is received.
Depending on other page content, you could run your script on DocumentReady as opposed to onload.
DocumentReady runs after the page downloaded and the DOM rendered, but before images are retrieved.
I believe that there is an official DocumentReady event somewhere, but I still have to support IE6 on my pages, so I use a busy loop to watch the DOM.