Ways to incorporate gentle page breaks into an HTML document

My task involves creating an XSL script to analyze various XML files that share a similar structure. The aim is to parse these XMLs and transform them into HTML pages. For longer XML documents, I want the resulting HTML page to be paginated (meaning the parsed HTML content should be displayed in separate div elements, with each representing a different page). The text should transition to the next div if the current one becomes full or if a block-level element is too large to fit on the current page.

The challenge lies in not knowing exactly when a page break will occur due to the dynamic nature of the output, although I am aware of the dimensions of each page's div. Furthermore, it is crucial that I find a solution that does not rely on Javascript for performance reasons.

I explored the option of using CSS regions, but given their poor browser support, I am seeking suggestions for alternate solutions or guidance on how to proceed. Can anyone provide assistance in this matter?

htmlcssxslt

Answer №1

At the moment, apart from CSS regions, there isn't a CSS-only solution available. It's not possible for content within one div to flow into another.

Have you considered utilizing a CSS3 Multiple Column Layout? This feature has increased support according to Can I Use.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to determine if an element is the initial child

I am currently facing issues while attempting to make my bootstrap carousel dynamic and inject data properly. My aim is to locate the first child of the injected data and apply the "active" class to it. I am utilizing Laravel Blade for rendering my data. B ...

jqueryhtmllaravelbootstrap-4

There was an issue with the SidebarController function being undefined, as it was expected to be a function

I'm encountering two issues with my demo: Error: [ng:areq] Argument 'SidebarController' is not a function, received undefined http://errors.angularjs.org/1.2.26/ng/areq?p0=SidebarController&p1=not%20aNaNunction%2C%20got%20undefined ...

phpjqueryhtmlcssangularjs

What could be causing the unexpected behavior of nth-child?

I'm trying to position an image with the class photo, but unfortunately, the nth-child selector is not having any effect on that particular element. I have searched for various solutions, but none seem to be working! .container { height: 100vh; ...

csscss-selectors

Inserting data into a JavaScript database

When attempting to add a new row to a datatable and submit it to a JSP for database insertion, an error is encountered. The error message reads: "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the r ...

javascripthtmlajaxjsp

Can someone explain how to use JavaScript to make table data fill the entire row in a table?

After clicking the button, the layout of the table changes. I want to keep the original table layout even after the JavaScript function runs. I am still learning about JavaScript. function toggle(button) { if(document.getElementById("1").value=="Show ...

javascripthtmlcss

Transform the binary image data sent by the server into an <img> element without using base64 encoding

It's been a challenge trying to find a reliable method for adding custom request headers to img src, so I'm experimenting with manually downloading the image using ajax. Here is an example of the code I am working on: const load = async () => ...

javascripthtmlajaximage

The HTML file generated from a Quarto document (.qmd) seems to be experiencing compatibility issues for users other than myself

As a beginner in R, I have encountered an issue when trying to share my R Quarto document with others who are not familiar with R. I prefer to share it as an html file, but the appearance of the document changes significantly when opened on another person& ...

htmlrquarto

Utilizing JavaScript, create a dynamic grid gallery with Div Spin and expand functionality

I am looking to create a unique effect where a div rotates onclick to reveal a grid gallery on the rear face. Starting this project feels overwhelming and I'm not sure where to begin. <ul class="container-fluid text-center row" id=" ...

javascripthtmlcssbootstrap-5image-gallery

Achieving a layered effect: Bootstrap Navbar on Carousel

Currently, I am designing a mockup and aiming to create a full-screen carousel with the navigation bar links positioned on top of the images. At the moment, the navbar appears transparent until I scroll down the image/slider making it full screen. How can ...

htmlcsstwitter-bootstrap

Below are three texts of varying sizes along with their corresponding images. I adjusted the height to align them properly, but when viewing on mobile devices, there are noticeable gaps between them

Three news articles are displayed below, each with its own image. The issue is that the text in the articles consists of quotes of varying sizes, causing them to not align properly. Adding a fixed height in pixels solves the alignment problem on the Deskto ...

htmlcssbootstrap-4

Are there any tools available that can generate CSS code automatically

Our team offers a pre-set CSS file along with the HTML mock-up for partners to customize, such as changing colors and background images, to match their desired aesthetic. They then provide feedback on the modified CSS files back to us. However, we face a ...

htmlcss

Retrieve information from Wikipedia corresponding to the keyword entered in the form

Imagine a situation in which a user inputs a keyword into a text field. I am seeking a way to retrieve relevant data from Wikipedia that corresponds to the entered keyword. How can this be accomplished? <form method=POST action=someaction> ...

phphtmlajax

Is using CSS as an HTML attribute considered poor practice?

I've been noticing an increasing trend of combining HTML, CSS, and JavaScript together in web development. However, I was taught to keep them separate with HTML linking to the sources/scripts. While using the style attribute in HTML is sometimes acce ...

htmlcss

What is the best way to ensure that this <span> maintains a consistent width, no matter what content is placed inside

So here's the deal, I've got some dynamically generated html going on where I'm assigning 1-6 scaled svgs as children of a . The span is inline with 2 other spans to give it that nice layout: https://i.sstatic.net/mySYe.png I want these "b ...

javascripthtmlcss

Is the HTML5 type of button functioning properly, while the type of submit is not working as

Looking to validate a form before running a JavaScript function? Check out this code snippet: function updateMap() { //dummy } <form> <div class="group"> <input type="number" id="hour" min="0" max="23" required> <span cl ...

javascripthtml

The issue with IE-9 is that it is mistakenly picking up the placeholder value as

My HTML code looks like this: <input id="SLOCriteriaOtherText" name="SLOCriteriaOtherText" style="width: 100%;" type="text" data-role="autocomplete" placeholder="Enter name for 'other' metric..." class="k-input" autocomplete="off" role="textb ...

javascriptjqueryhtmlinternet-explorer

Issue with bouncing dropdown menu

I am in the process of enhancing a Wordpress website by implementing a jQuery menu with sub-menus. Below is the jQuery code snippet: $(document).ready(function(){ $('.menu > li').hover(function(){ var position = $(this).position(); ...

javascriptjqueryhtmlcsswordpress

Can bootstrap columns be offset only on large devices?

Is there a way I can have the title column float to the right side of the page only on medium devices and larger screens, while keeping it centered for smaller devices like phones? Any advice is appreciated! <div class="section header"> <div ...

htmlcsstwitter-bootstrap

How can I ensure that my boxes are aligned in a straight line?

I'm having trouble with applying the style="display: inline-block" to each div. Can someone please assist me? https://i.sstatic.net/Gi75l.png Below is my HTML code: <div class="hobby" style="display: inline-block"> <di ...

htmlcssbootstrap-4

CSS transform causing scrolling issues in Microsoft Edge browser

Whenever I click a button, a div flips. Once flipped, the div contains a scrolling list. If the list is not long enough to scroll, everything works fine. However, if the list is long enough to require scrolling, the items disappear... This issue ...

htmlcssoverflowcss-transformsmicrosoft-edge