Steps for breaking down a given string into divisions that correspond to an A4 sheet

Within my content, there are various styles applied. For example:

This is a <b>bolded</b> word.

I am seeking a solution to divide this long string into smaller sections that would fit on an A4 page accurately. The goal is to maintain the integrity of the entire text over multiple A4 pages, with the scaled-down versions displayed on the device screen.

https://i.sstatic.net/3k05V.png

Past attempts at similar challenges have not yielded results, as I am unsure of where to even begin the process.

In a previous version of the application, the text was split into divs and utilized elementFromPoint() to detect overflow onto subsequent pages.

The formatting of the pages is suitable, and now I require a method to identify optimal points for separating the text seamlessly.

javascripthtmlcssionic-framework

Answer №1

Here is my solution to the problem you posed.

To achieve this, I have utilized jQuery, so remember to include:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

within your <head> tag.

The code necessitates 3 parameters:

  1. String - Your lengthy string
  2. Height - in px of the A4 page (set to 72dpi).
  3. elemTag - Parent div where all page divs will be located. In this instance, it's set to body.

Below is the code snippet:

// elemTag could be an ID, Class, or Tag
// Utilize it to specify where to append divs
function splitStringIntoDivs(string, height, elemTag) {
let page = 0;
  var l, i = 0,
    arr = longString.split(' '),
    elem = $('<div data-page="' + page + '"/>').appendTo(elemTag);
  for (l = arr.length; l > i; i++) {
    elem.append(arr[i] + ' ');
    if (elem.height() > a4Height) {
    page++;
      elem = $('<div data-page="' + page + '"/>').appendTo(elemTag);
      elem.append(arr[i] + ' ');
    }
  }
}

// 72dpi
var a4Width = 595;
var a4Height = 842;

var longString = "Lorem ipsum dolor sit amet, volutpat purus a vitae id felis..."; // The lengthy string goes here

splitStringIntoDivs(longString, a4Height, "body");
* {
  padding: 0;
}

div {
  border: 1px dashed green;
  margin-bottom: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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 swap out unique symbols for HTML elements

I'm currently facing a challenge where I need to locate all strings between two specific characters and then replace those characters with HTML tags. For example, $str = "dog *cat* ping goat *pizza* cow rabbit*"; I would like a function tha ...

phphtml

Accessing PageController through XmlHttpRequest is not allowed in Shopware 6

I'm encountering an issue when attempting to send a request to my customized StorefrontController on the most recent version of Shopware 6.2.2. The error message I'm receiving is: PageController can't be requested via XmlHttpRequest. I&apos ...

javascriptajaxsymfonyshopwaresymfony-routing

Bootstrap 4.6 - new feature: flexible vertical pills and sleek horizontal tabs (inactive tab no longer highlighted)

I recently implemented Bootstrap 4.6 into my project. The page I am working on includes both vertical pills and horizontal tabs. While the vertical pills are displaying correctly, I have encountered an issue with the styling of the horizontal tabs when th ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for arranging files within a directory in Netbeans IDE

I prefer to centralize all CSS files in a single folder for easy access. Below is the path of my CSS directory: css/sampl.css. Here, css represents the folder. This is the code snippet I am using: <link href="/CSS/sampl.css" rel="stylesheet" type="te ...

javacssjspurlnetbeans

The MUI Modal is too large for the display

I'm using a Modal component from MUI in my project and I am facing an issue with displaying a large JSON object inside the modal. The problem is, the top of the modal extends beyond the screen height and even after making it scrollable, I am unable t ...

cssreactjsmaterial-ui

Tips for changing an input value when clicked using JQuery

Struggling to create an interactive mind mapping tool using JQuery? One challenge I'm facing is editing the content of a div once it's been set. I've implemented a function that successfully adds text to a div within the (mind-container). H ...

javascriptjqueryhtmlinputclick

Encountering a type error when attempting to assign an interface to a property

In my Angular project, I am working with typescript and trying to assign the IInfoPage interface to some data. export interface IInfoPage { href: string; icon: string; routing: boolean; order: number; styleType: string; ...

javascriptangulartypescript

Select multiple rows by checking the checkboxes and select a single row by clicking on it in the MUI DataGrid

I am currently utilizing the MUI DataGrid version 4 component. The desired functionalities are as follows: Allow multiple selections from the checkbox in the Data Grid (if the user selects multiple rows using the checkbox). Prevent multiple selections fr ...

javascriptreactjstypescriptdatagridmaterial-ui

Guide to implementing controllers in vuejs2

Hey there, I recently started using vuejs2 with a project that is based on laravel backend. In my vuejs2 project, I wrote the following code in the file routes.js export default new VueRouter({ routes: [{ path: '/test', component: ...

javascriptvue.jsvuejs2frontend

Converting user IDs to usernames in discord.js

I'm currently developing a bot and I want to implement a feature where every time a command is used, it logs the action in the console. Here's the code snippet I've been working on: console.log(message.author ++ ,`used the comman ...

javascriptnode.jsdiscorddiscord.js

DIV height adds a layer of design to a website, making it visually

I have a situation where one of my web pages contains a DIV element with text inside, set at 1.1em size. Here's an example: <div id="displaydiv"> <b>Hello World</b> </div> On another page, I have the same DIV element but ...

htmlcss

Angular - CSS Grid - Positioning columns based on their index values

My goal is to create a CSS grid with 4 columns and infinite rows. Specifically, I want the text-align property on the first column to be 'start', the middle two columns to be 'center', and the last column to be 'end'. The cont ...

htmlcssangular

Is the concept of client fanout truly beneficial?

I'm in the process of constructing a community platform on firebase that features timelines and posts similar to those found on Facebook. When a user creates a post, it should automatically appear on the timelines of their followers. Google proposes ...

javascriptreactjsfirebasefirebase-realtime-database

The map function is not functioning properly following a state update in React

Hey there! I've come across a bit of a dilemma with my map function that I'm using to map a data array within one of the states in my application. Everything seems to be running smoothly upon the initial load, but as soon as I start adding new d ...

javascriptreactjs

Do form validations affect the values assigned to ng-model objects?

If a form has the structure below: <form> <input type="text" required ng-model='myValue' ng-maxlength='5'></input> {{myValue}} {{myValue.length}} </form> Is there a way to prevent the model from b ...

javascriptformsangularjsvalidation

Using HTML to create an email link with a subject that includes special characters such as '&'

Is it possible to dynamically set the email subject to include an '&' sign in client-side HTML? Here is the code I am working with: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="533d3c7e3c3d361320 ...

htmlemailspecial-charactersmailto

Tips for transitioning from Angular to Angular 2: Overcoming key challenges

Our current Angular project is highly developed, but with the emergence of Angular 2 and its advanced features and improved performance, we are considering migrating our existing work. However, we are concerned about the potential challenges that may ari ...

javascriptangularjstypescript

Tips for refreshing the default style of Material UI select

I'm having trouble customizing the default background color of the first menuItem in the select component. The class I need is not visible when inspecting the element, as the background color disappears upon inspection. Steps to reproduce: 1. Click ...

javascripthtmlcssreactjsmaterial-ui

Unable to add key/value pair to object in Node

While using Node, I encountered a strange issue where I was unable to attach the key/value pair broadcastStamp = date to the object "result." Despite confirming that it is indeed an object with typeof, no errors were thrown - the key/value simply did not a ...

javascriptnode.js

Is there a way to detect esbuild's build errors and execute a script in response?

Does anyone know how to handle esbuild's build error and trigger a script afterward? I'm integrating it into my workflow with npm, VSCode, and pure JavaScript. I've searched everywhere but haven't found any information on this specific ...

javascriptnode.jsnpmesbuild