Alternate CSS options for controlling printing besides page-break-after and page-break-before

I am in the process of creating a web interface for printing barcodes on Avery label sheets. How can I ensure that the barcodes align perfectly on each label, using measurements like inches or centimeters? And most importantly, how do I prevent the barcodes from bleeding into neighboring labels on the same page?

My current approach involves using a table for each page that matches the label sizes as closely as possible. However, after printing multiple pages, the barcodes start to shift off the labels. This limits me from including additional information under the barcodes, as it exacerbates the issue. I have tried using CSS properties like page-break-after and page-break-before, but they do not seem to have any impact.

Any suggestions or advice would be greatly appreciated!

javascripthtmlcssprinting

Answer №1

Although no code was provided, I will attempt to assist:

Begin by acquiring Selectivizr and jQuery to allow IE to interpret the necessary CSS3 elements:

Here is a sample HTML layout I quickly put together:

    <div id="wrapper">
        <div class="barcode">
            <img src="/path/to/barcodes/1.jpg" />
            <span class="descr">Some descriptive text</span>
        </div>
        
        (Additional similar barcode sections)
    </div>

And here is the needed CSS styling:

    body { margin: 0; padding: 0; }
    #wrapper { width: 100%; display: block; }
    .barcode { width: 30%; float: left; margin-bottom: 50px; }
    .barcode img { display: block; width: 150px; height: 150px; margin: 0 auto 10px auto; }
    .barcode span { display: block; text-align: center; }
    #wrapper div.barcode:nth-child(3n+4) { clear: left;  }
    #wrapper div.barcode:nth-child(6n+6) { page-break-after: always; background: #000; }

This setup will trigger a page break after every 6th barcode. Assuming I comprehended your query correctly, this solution "should consistently function".

Please note my testing capabilities are somewhat restricted... :)

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

Completely adaptable progress bar that adjusts to any screen size

I need to develop a responsive progress bar that adjusts its width dynamically. However, when I set the width to auto, the progress bar line becomes detached from the stars. How can I resolve this issue and make the progress bar responsive on mobile device ...

htmlcssflexboxresponsive

After receiving the go-ahead from JavaScript, I am planning on integrating PHP into my project. I have come across some recommendations

Looking for assistance with AJAX functionality on a website. Specifically, users should be prompted to confirm a purchase before completing it. If they confirm, the purchase goes through; if they decline, it does not. Originally considered using PHP within ...

javascriptphpajax

Callback in React Setstate triggered, leading to a delay in rendering

Recently, I embarked on a journey to learn React just 2 days ago. Despite my enthusiasm, I have encountered some challenges with React's setState method. As far as my understanding goes, I should utilize the prevState parameter when I need to alter th ...

javascriptarraysreactjssetstate

Endless rotation with stunning magnification feature

My goal is to create a responsive carousel with auto-play infinite loop functionality, where the center item always occupies 70% of the viewport width. Currently, I have achieved a similar result using the Slick library: https://codepen.io/anon/pen/pBvQB ...

javascriptjqueryhtmlcss

Select component with nested checkboxes for multilevel dropdown

I am interested in developing nested dropdowns with checkboxes, similar to the example shown in this image: Image 1 Is there a way to achieve this functionality using React? I have not been able to find any specific library that allows for this implement ...

javascriptreactjsmaterial-ui

Guide to showing a form following a button click in Angular 9

I am trying to create a feature on my page where when I click a button, a form will appear directly below it. Additionally, I would like the number of forms displayed to match the number of times the button is clicked. Being a newcomer to Angular 9, I am ...

htmlangularangularjs-directive

In ReactJs, what is the best way to load a new component when a button is clicked?

In ReactJs, I have developed a main component known as MainPage using Material-UI. import React from 'react'; import Grid from '@material-ui/core/Grid'; import Button from '@material-ui/core/Button'; import CssBaseline from & ...

javascriptreactjsmaterial-ui

Is there a way to enlarge an iFrame to fill the entire screen with just a button click, without using JavaScript

I am currently attempting to achieve full screen mode for an iFrame upon clicking a button, similar to the functionality on this site. On that website, there is a bar that expands to full screen along with the embedded game, which is what I am aiming for. ...

javascripthtmliframefullscreen

Animating progress bars using React Native

I've been working on implementing a progress bar for my react-native project that can be used in multiple instances. Here's the code I currently have: The progress bar tsx: import React, { useEffect } from 'react' import { Animated, St ...

javascriptreactjstypescriptreact-nativeanimation

Putting the second line of a list in a paragraph element with indentation (excluding UL or OL)

I am working with a table that has the following structure: html { width: 400px; } <table> <tr> <td>Description:</td> <td style="white-space: pre-wrap;"> Some text which could be quite long with some &apos ...

htmlcss

Utilize import and export statements to transfer an HTML tag between two JavaScript files

I have two HTML files linked to two JS files. I want to save an HTML tag from HTML1 with JS1 in a Variable and export it. Then import it in the JS2 file and use it in HTML2 I have tried many ways but nothing seems to work, something as simple as this Exp ...

javascripthtmlcssreactjsnode.js

Sharing NPM Scripts Via a Package to be Utilized by Project upon Installation

I have streamlined my linting setup by consolidating all configuration and related packages/plugins/presets (for prettier, stylelint, eslint, commitlint) into an npm package. This allows me to utilize the same setup across multiple projects, simply extendi ...

javascriptnpmpackage.jsonnpm-scripts

Beside the element, a dropdown navigation menu emerges

Trying to work on a dropdown menu here. It appears to be functioning, but there's a small issue - the dropdown shows up on the right side of the element instead of directly below it. I have a feeling it has to do with either position or padding, but I ...

htmlcss

Display a text field upon clicking on a specific link

I am trying to create a text field that appears when a link is clicked, but I haven't been able to get it right yet. Here is what I have attempted: <span id="location_field_index"> <a href="javascript:void(0)" onclick="innerHTML=\"< ...

phpjavascript

Clicking on two links simultaneously to avoid them being blocked as pop-ups

Is there a way to open 2 URLs at the same time with just a click? I'm open to using jquery, javascript or any other method. Priority is on efficiency and speed, but I am open to all options. I attempted using onclick in the anchor tag and also tried ...

javascriptphpjqueryhtmlhref

Is there a way to achieve a full-page inset shadow using absolute positioned elements?

Currently, I am facing a challenge with a page that has an inset box shadow on the body element. When there are absolute and relative positioned divs on the page that expand enough to generate a scrollbar, the box shadow is cut off even when the height is ...

htmlcss

Tips for including HTML in a JSON request in ReactJS

Upon sending the request as shown below, the response was successfully received. { "contractId": "siva8978", "html": "<p>PREFERENCE SHAREHOLDER AGREEMENTTHIS AGREEMENT is made on the&nbsp;$$Contract Start Date$$ BETWEEN&nbsp;CRADLE WEALTH ...

javascripthtmljsonreactjs

Retrieve a single document using Angularfire2 without setting up a listener

I'm facing an issue with angularfire2 v6 and angular 11. Specifically, I am attempting to retrieve a single document from the users collection based on their email without utilizing valueChanges() or snapshotChanges(). Realtime updates are not necessa ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

The global variable is inaccessible when invoked within a dynamically generated function

The variable selected is a global one and accessed using this.selected, which reliably returns the correct value. However, when called from a dynamically created function, it returns unknown. onClick: function(val){ for (i = 0; i < positi ...

javascriptvue.js

The entire component is not displayed in Vue

Just starting out with Vue. I'm looking to create a component that encompasses the entire page except for the header and footer Vue.component('main-block', {template: ` <section id="first-block">...</section> <secti ...

javascriptvue.js