Make sure your HTML content is optimized to fit on one page when printed

I'm currently using Swift along with a WKWebView to load HTML, establish the A4 page dimensions, and then save it as a PDF. (Though, I believe this is more of an HTML/CSS-focused question).

The generation process looks like this:

    func generatePDFData(landscape: Bool, newLayout: Bool) -> NSMutableData {
        var a4PageFrame: CGRect?
        a4PageFrame = landscape ? CGRect(x: 0, y: 0, width: 841.8, height: 595.2) : CGRect(x: 0, y: 0, width: 595.2, height: 841.8)

        let originalBounds = bounds
        bounds = CGRect(x: originalBounds.origin.x, y: bounds.origin.y, width: bounds.size.width, height: scrollView.contentSize.height)

        let printFormatter = viewPrintFormatter()
        let printPageRenderer = UIPrintPageRenderer()
        printPageRenderer.addPrintFormatter(printFormatter, startingAtPageAt: 0)
        printPageRenderer.setValue(a4PageFrame, forKey: "paperRect")
        printPageRenderer.setValue(a4PageFrame, forKey: "printableRect")

        printPageRenderer.headerHeight = newLayout ? 10 : 25
        printPageRenderer.footerHeight = newLayout ? 10 : 25

        bounds = originalBounds

        return printPageRenderer.renderPDFData()
    }

Additionally, here is a sampling of the HTML code used:

<!DOCTYPE html>
<html>

<head>
...
  </style>
</head>



<body>
...
</body>

</html>

I am wondering if there exists a method to display all of this content on just one page through auto-adjustment? Specifically, resizing the table to fit onto a single page (even if that means reducing font size, etc., which would likely be necessary). The content varies in quantity, sometimes more or less depending on user input. Typically printed in landscape mode, but even on desktops, fitting everything onto one page is difficult: https://i.sstatic.net/KuSSs.jpg

Answer №1

Experiment with the zoom CSS property on either HTML or body, and tweak the percentage value to suit your needs.

@media print {
  html {
    zoom: 50%;
  }
}

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

html Tips for referencing a file in an input tag

Imagine you have a basic form with an <input type="file"> tag. What I aim to achieve is, once the user selects a file (which is an image), I want to display that file on the same page for viewing - providing a better user experience. I attempted to ...

Struggling to properly align div in the center

I've been struggling to properly center a div inside another div, but instead of being centered it appears shifted to the right. I've experimented with different positioning combinations and techniques from various sources, yet I haven't fou ...

The z-index property does not seem to apply to pseudo elements

I am facing an issue while trying to add a pseudo element after a div in my react project. Surprisingly, the code works perfectly fine in CodePen but fails to work on my local machine. I have applied z-index only in CodePen, which seems to resolve the issu ...

What is the best practice for incorporating CSS and JavaScript files into a PHP template?

I've created a basic template for my PHP website, but I'm struggling to find the best way to include my CSS and JavaScript files. Take a look at my index.php file below: <?php include'core/template.php'; $temp=new Template(); $sett ...

`Angular 9 template directives`

I am facing an issue with my Angular template that includes a ng-template. I have attempted to insert an embedded view using ngTemplateOutlet, but I keep encountering the following error: core.js:4061 ERROR Error: ExpressionChangedAfterItHasBeenCheckedEr ...

Having trouble running my Flutter app on a real iPhone 11 device with iOS 15.2 and Xcode 13.2.1. The app runs smoothly on the simulator, but not on the actual device

021-12-29 18:21:34.187991+0530 Runner[473:19732] Metal API Validation Enabled 2021-12-29 18:21:34.316468+0530 Runner[473:19732] Could not load the "LaunchImage" image referenced from a nib in the bundle with identifier "com.adit.betaapp" ...

Is it considered a bad practice to use the record ID on a <tr> element for an editable row within a table?

I am in the process of using jQuery to create a feature that allows users to edit a HTML table containing category names. Currently, I have successfully populated my table using PHP/MySQL. While researching on jQuery - Edit a table row inline, I came acr ...

In order to activate the VScode Tailwind CSS Intellisense plugin, I have discovered that I need to insert a space before

I recently followed the installation guide for using Tailwind with Next.js Here is a snippet from my tailwind.config.js file: /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", ...

What is the best way to condense text within a header and still maintain right-aligned buttons?

I'm having trouble using css to position some buttons on the right side of my header, while also ensuring that the text collapses if it becomes as wide as the buttons. I want to maintain justification and show ellipsis for the main text of the breadcr ...

Contrast the schedules of two different calendars

Attempting to compare two timetables for a college project in order to identify available time slots in one timetable and concurrently check for events happening in the other. For instance, if a student has an open period from 4-5 on a Tuesday, the code sh ...

Unable to display camera view in a swift/objective-c++ project utilizing opencv on iOS 10.3 with xcode 8

I am interested in linking OpenCV with swift/objective c++ to develop applications for iOS. After experimenting with CocoaPods, I found that they work well with OpenCV pods. Using them as a starting point, I successfully tried some image stitching examples ...

Tips for adjusting text size in segment control across various devices

I've been working on creating a customized segment control using CollectionViewCell to adjust the text size of the segment control on different devices. Unfortunately, I have encountered issues with its functionality across all devices. To address thi ...

Tips for inserting manual line breaks in justified text

My task involves taking a 5-page story from a Word document and implementing it on a website. #reading { hyphens: auto; text-align: justify } <div style="font-size: 20px; width: 750px; margin-bottom: 4em;" class="reading" id="reading"> TextT ...

Modify the layout and alignments of the ASP.NET user interface

Recently, I inherited a website built in ASP.NET and one of my responsibilities is to revamp its appearance by tweaking and correcting the div tags. I noticed that the previous developer utilized tables for layout purposes, especially when it came to setti ...

Blurry view in iOS when adding UILabel to zoomed UIScrollview

I have encountered an unusual issue while trying to add a UILabel to a zoomed UIScrollview. When adding views to the zoomed UIScrollview, I am including two specific views: 1. UIImageView 2. UILabel Below is the code snippet used to add an UIImageView to ...

What is the best way to store HTML code in a SQL Server database to ensure proper rendering?

My website is currently in development and is similar to Stack Overflow. I am using a simple textarea for text input as opposed to a WMD editor like the one used on Stack Overflow. When I enter HTML code as input and store it in my database table under a ...

Extract content within Python pre tags

A Python code snippet is being used to extract content between PRE tags: s = br.open(base_url+str(string)) u = br.geturl() seq = br.open(u) blat = BeautifulSoup(seq) for res in blat.find('pre').findChildren(): seq = res.string ...

Effects of hovering on navigation links in gatsby

I am currently working on developing a static website using Gatsby and I am facing some challenges. I am trying to implement a hover effect for the menu items in the navigation bar, but I am encountering difficulties with the CSS classes including Site-hea ...

Navbar transition issue in Bootstrap

Having trouble with Bootstrap transitions not functioning correctly on my navbar. The issue is when I click the dropdown button in the navbar, the hidden elements appear abruptly without any transition effect. Below is the HTML code being used: <!do ...

Discovering the visible boundaries of the canvas displayed on the screen

https://i.sstatic.net/iq6kb.png Currently, I am in the process of creating a game on canvas using pixi and JavaScript. The canvas itself is infinite, with only a small portion visible at any given time. The rest of the canvas extends beyond the visible ar ...