# HTML onbeforeprint Event Attribute
The `onbeforeprint` event attribute fires when a page is about to be printed, or when a user requests a print preview, but before the print dialog box actually appears.
This event is typically used to modify the page's layout or content immediately before printing (such as hiding specific interactive elements, expanding collapsed sections, or dynamically generating a print-friendly timestamp) and is commonly paired with the `onafterprint` event to revert those changes once the print dialog is closed.
---
## Browser Support
The `onbeforeprint` attribute is widely supported across all modern web browsers:
| Event | Chrome | Edge / IE | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **onbeforeprint** | 63+ | Yes | Yes | 13+ | 50+ |
---
## Definition and Usage
* The `onbeforeprint` attribute triggers a script right before the print dialog opens.
* **Tip:** It is highly recommended to use `onbeforeprint` in conjunction with the (ev-onafterprint.html) event to restore the original state of the webpage after the user finishes or cancels the print job.
* **Note:** While CSS `@media print` stylesheets are generally preferred for static layout changes (like hiding navigation bars), the `onbeforeprint` JavaScript event is ideal for dynamic modifications, such as updating data, logging analytics, or rendering hidden DOM elements before printing.
---
## Differences Between HTML 4.01 and HTML5
* The `onbeforeprint` attribute is a standard feature introduced in **HTML5**. It was not part of the HTML 4.01 specification.
---
## Syntax
### In HTML:
```html
```
*Note: Although this attribute can technically be applied to any HTML element, it is only functional and valid when placed on the `` element.*
### In JavaScript:
```javascript
window.onbeforeprint = function() {
// Your custom JavaScript code here
};
```
### Using `addEventListener()`:
```javascript
window.addEventListener("beforeprint", function() {
// Your custom JavaScript code here
});
```
---
## Attribute Values
| Value | Description |
| :--- | :--- |
| *script* | The JavaScript code or function to be executed when the `beforeprint` event is triggered. |
---
## Code Examples
### Example 1: Basic HTML Attribute Usage
This example alerts the user or executes a function right before the print dialog box appears.
```html
Welcome to YouTip
Press Ctrl+P (or Cmd+P on Mac) to print this page.
```
### Example 2: Dynamic Content Modification (Recommended Practice)
This example demonstrates how to temporarily modify the DOM before printing and restore it afterward using both `onbeforeprint` and `onafterprint`.
```html
YouTip Premium Article
Ad: Subscribe to YouTip Premium for ad-free reading!
This is the main content of the article that you might want to print.
```
---
## Considerations and Best Practices
1. **CSS vs. JavaScript for Printing:** For simple layout adjustments (e.g., hiding sidebars, changing font colors, or removing background colors), use CSS Media Queries instead of JavaScript:
```css
@media print {
#ad-banner, .navigation {
display: none !important;
}
}
```
Use `onbeforeprint` only when you need to perform complex JavaScript logic, such as fetching fresh data from an API, generating a dynamic QR code, or logging a "Print" action to your analytics server.
2. **Execution Timing:** The `beforeprint` event runs synchronously before the browser generates the print preview. Avoid running heavy, blocking operations inside this event handler, as it can delay the appearance of the print dialog and degrade the user experience.
YouTip