Styling content in a CSS file and then rendering it as a

My current project involves converting a webpage into a PDF file and I am using @page @bottom-left to insert text in the bottom left corner.

@page {size: portrait A4;
 @bottom-left {content: "Some text to display at the bottom left. Some additional text";font-size: 7pt;font-family: "Verdana";color: #cccccc;}
}


Everything is working smoothly, but now I want to add a line break similar to this:
Some text to show bottom left.
Some more text

I have attempted to use <br>, <p>, \n, \r but they all appear as plain text.
I also tried &#10; but it caused the styling to stop working completely.
Is it possible to achieve a line break in this scenario, and if so, what would be the correct syntax to accomplish it?

htmlcsspdf

Answer №1

When creating content, authors have the ability to include newlines by using the "\A" escape sequence within the 'content' property string. This newline is affected by the 'white-space' property. Source

To input a newline, use \00000a or \A

 content: 'Some text to display at the bottom left. \A Some additional text';

CSS:

 white-space: pre;

Check out the demo: here

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

Buttons to maximize, minimize, and close individual sections on a webpage

I am fairly new to front end development and I must say, I am absolutely enjoying every bit of it. Here is a little challenge that came my way. It may seem simple to some but it got me thinking. I have three sections on the right side of my website. I wa ...

javascriptjqueryhtml

Is it possible to integrate a Twitter bootstrap theme into a Rails 4 application if the Vendor/assets directory is missing?

My goal is to integrate a theme from wrapbootstrap.com into my rails 4.1 application. After creating a new app with rails 4 scaffolding, I proceeded to extract the downloaded zip directory which contains 4 directories and an index.html file. I then placed ...

javascriptcssruby-on-railstwitter-bootstrap

Adjust Navbar Header Color Based on Screen Size

I am completely new to front-end development. I am in the process of building my own responsive website using Bootstrap 3. One issue I am facing is that when I resize my browser window to simulate a phone screen, I want the navigation bar color to change ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating a personalized navbar design using Bootstrap

I'm attempting to build a navbar using bootstrap 4: However, I am uncertain of how to achieve this :/, can anyone offer any advice?! I am specifically interested in the lines on the left and right of the navbar, as well as the image centered in the m ...

htmlcssbootstrap-4

What happens when there is no match found while attempting to edit a form with the UI-Bootstrap typeahead directive?

Here is the code that demonstrates how my typeahead input box functions. Users can enter a name, and the relevant information will populate the rest of the form. If no match is found, users should still be able to input the name and related details into th ...

javascripthtmlangularjsangular-ui-bootstrap

The float:left property within a div is not behaving as anticipated

I am having trouble positioning my second div. In order to have 70% of my website for posts and 30% for a small text display, I created a new div. I believe the correct way to position it is by using "float: left" so that the div goes under the banner whe ...

htmlcssresponsive-design

Guide to opening a link in a new tab within the same webpage

I have observed numerous web applications that feature a single web window with multiple links. When clicking on the links, the corresponding form opens in a new tab within the same web page of the application. I'm curious about how to achieve this fu ...

jqueryhtmlcssajaxjquery-ui

Tips for automatically focusing a div upon page load

Here is a code snippet for you to review: <div id="details"> <nav> <a href="#1"><span>Summary</span></a> <a href="#2"><span>Perso ...

phpjqueryhtml

Transform pixel padding into percentage ratios

I've been searching through various discussions to find a solution, but none of them seem to fit my particular scenario. My issue involves a hyperlink with absolute positioning inside a div with relative positioning. The padding and margins are curre ...

javascripthtmlcsspositionpadding

Erase a set of characters with the press of the backspace key (JavaScript)

Within my textarea, I have lines that start with a number and a period: <textarea autoFocus id="text-area"wrap="hard" defaultValue ={this.state.textAreaVal} onKeyUp={this._editTextArea}/> For example: Line 1 Line 2 Line 3 I've created a ...

javascripthtmlreactjs

Alignment of text fields in a vertical manner

How can I vertically align text input fields using CSS? <form action='<?= $_SERVER['PHP_SELF']; ?>' method='post'> <p><label for='username' class=''>Username:</label& ...

cssvertical-alignment

Generating a .png image using the data received from the client [node]

I need to create a highchart client-side and save a PNG of that chart server-side. After successfully generating the highchart and converting it to a PNG using the following function: function saveThumbnail(graph_name, chart) { canvg(document.getEleme ...

javascripthtml

Executing PHP queries with the help of jQuery

Currently, I am developing a webpage that involves checking a checkbox to trigger a PHP function which queries the table for user existence. If the user exists, a button is displayed allowing them to proceed to the next page. I have made an attempt at thi ...

phpjqueryhtmlajax

The mdb navigation bar seems to constantly change its height

Having an issue with the height of my mdb navbar in my Angular app. It randomly flips to a larger size when reloading the page, but returns to normal when I open the developer console in Chrome. Two screenshots show the correct display and the incorrect i ...

cssangularmdbootstrap

Guide: Using jQueryUI's explode effect to animate an HTML element explosion

I'm having trouble getting the jQueryUI explode effect to work properly. I've tested it out on this jsfiddle, but the explosion effect doesn't seem to happen as expected - the element just disappears with no explosion animation. $('h1, ...

javascriptjquerycssjquery-uijquery-effects

What is the best way to center elements vertically within a table element?

I'm encountering some issues with my tables. I have created two tables, stacked one below the other, and I am trying to center the elements within them. However, I am facing difficulty in achieving vertical alignment and true centering, as shown in th ...

htmlreactjshtml-tablereact-bootstrap

How to target CSS when a DIV does not have a particular sibling

I am currently dealing with HTML markup that is being generated by a third-party application. I am in the process of styling it to fit my branding, but I have encountered a challenge that I cannot figure out. Most of the time, the HTML structure consists o ...

htmlcss

Creating a Web Form in Outlook Using the POST Method

Seeking help in creating an HTML email featuring two interactive buttons - Approve and Reject. I have successfully generated the HTML email and sent it to Outlook. Snapshot: The HTML code within the email: <!DOCTYPE html> <html lang="en" xmlns ...

htmlformsemailoutlook

When dealing with lengthy product names, Python Selenium may encounter difficulty retrieving the product's name

I need to extract information about all products (such as name, image, price, and link) from . However, I encountered a problem where the product card cannot display the full name of the product if it is too long, resulting in the name and price being retu ...

pythonhtmlstringselenium-webdrivercss-selectors

What is the best way to create a more compact Select component in React?

Working on React's Select component has been quite the challenge for me. I'm in the process of creating a simple dropdown button, also known as a ComboBox, similar to what can be seen on GitHub Insights: https://i.stack.imgur.com/J9Bcd.png Belo ...

javascriptcssreactjsmaterial-uiinline-styles