CSS styles do not apply to PDF files when downloading

My table headers are styled with writing-mode: vertical-lr, and they look perfect on the screen.

https://i.sstatic.net/cQ6Vm.jpg

However, when I used the same CSS to style the PDF file, the headers did not display vertically. It seems like the PDF file does not respond well to many CSS styles.

https://i.sstatic.net/uWUid.jpg

Any suggestions on how to make the PDF file display like it does onscreen when downloaded?

<table>
<thead>
                <tr>
                     <th style="border: 1px solid black; font-size:11px;width:120px;text-align:center;font-weight: bolder;color: black;vertical-align: bottom;">
                                                SUBJECTS
                                            </th>
                                           <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                CA1 10%
                                            </th>
                                           <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                CA2 10%
                                            </th>
                                           <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                CA3 10%
                                            </th>
                                            <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                CA4 10%
                                            </th>
                                            <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                CA5 10%
                                            </th>
                                            <th style="border: 1px solid black; font-size:11px;width:50px;;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                CA6 10%
                                            </th>
                                            <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                CA TOTAL 60%
                                            </th>
                                            <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                EXAM 40%
                                            </th>
                                            <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                TOTAL 100%
                                            </th>
                                            <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                GRADE
                                            </th>
                                           <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                HIGHEST IN CLASS
                                            </th>
                                            <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                LOWEST IN CLASS
                                            </th>
                                            <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                POSITION
                                            </th>
                                            <th style="border: 1px solid black; font-size:11px;width:50px;font-weight: bolder;color: black;writing-mode: vertical-lr;transform: rotate(180deg);vertical-align: middle;">
                                                REMARK
                                            </th>
                </tr>
            </thead>
            </table>

htmlcsspdfmpdf

Answer №1

After some trial and error, I was able to crack the code by following the solution outlined in https://github.com/mpdf/mpdf/issues/357

I specifically implemented the text-rotate attribute solely on the tr tag for the headers.

<table>
<thead>
<tr text-rotate="90">
<th><p>Element type 1A</p><p>Second line</p><th><p>Element type longer 2A</p></th>
<th>Element type 3B</th>
<th>Element type 4B</th>
</tr>
</thead>
</table>

As a result, all the text in the headers ended up being rotated as intended.

Answer №2

Looking through the mpdf documentation, I noticed a section dedicated to supported CSS properties. Unfortunately, the writing-mode property that you are relying on is missing from the list. Additionally, the library does not support the rotate() function that you may have considered using as an alternative.

It seems like the only solution to this issue would be switching to a different PDF generation tool.

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

Toggling display of divs with jQuery using plus and minus icons

Is it possible to use two different icons as a sprite image for when the show and hide functions are active on a div element? For instance, having a + icon displayed when showing the div, and then switching to a - icon when hiding it. The current code I ...

jqueryhtmlcsshideshow

Node.js application for changing attributes in an HTML string

Within my node.js backend, there exists an object with a specific property named content, which stores an HTML string. The content within includes an img tag that currently has a src attribute containing a base64 string. I am seeking to modify this src att ...

javascripthtmlnode.js

How to truncate text in a cell of a Vuetify data table using CSS styling

Is there a way to truncate text in a cell using CSS without it wrapping around or overflowing? The ideal CSS code should include: .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } However, the current implementation caus ...

cssvue.jsvuetify.js

What is the best method for setting the height of an empty inline block element to match the line height of its container?

By default, inline-block elements adjust their height based on the container's line height only when they have content. However, I've noticed that empty or whitespace-only inline block elements default to a height of 0 (observed in Firefox). Is ...

css

Decrease the gap between the <hr> and <div> elements

I currently have multiple div tags with hr tags in between, resulting in automatic spacing. I am looking to decrease this space. Please view the image link provided below for reference. [I am aiming to minimize the gap indicated by the arrow] Additionally ...

htmlcsstextlinespace

Having trouble with Vue.js not returning HTML elements from methods properly?

I have been attempting to retrieve html elements from a method, and I thought of using v-html for this purpose (not sure if there is a better approach). However, I seem to have encountered an issue with backtick templates and string interpolation. An error ...

javascripthtmlvue.js

Exploring the Relationship Between Z-Index and Overflow in a Collapsible Div Featuring Slim Select

Here is my demonstration of embedding a Slim Select dropdown within a collapsible div: CodePen Example <html> <head> <!-- MULTIPLE SELECT DROPDOWNS --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ ...

htmlcssoverflowz-index

Binding HTML Elements to JavaScript Values

Currently, I am working on a project with .Net and Vue. However, I am facing an issue in binding a value in a label. <li v-for="restaurant in vHolidays.data" > <form id="1"> <div> ...

htmlvue.js

Connecting HTML pages on two different drives on the same computer: Is it possible?

Is it possible to create hyperlinks between HTML pages located in two different folders on separate drives (for example, one in Drive:C and another in Drive:E) on the same computer? I can navigate up multiple directories and to different folders or subfol ...

html

Incorporating unique typography onto your website (HTML/CSS)

I am currently struggling to implement a custom font on my website. I'm not very experienced with programming, and since my friend isn't available to help, I'd appreciate a solution from anyone. The issue I'm facing is that while the Ca ...

htmlcss

Issue with Bootstrap v3.3.6 Dropdown Functionality

previewCan someone help me figure out why my Bootstrap dropdown menu is not working correctly? I recently downloaded Bootstrap to create a custom design, and while the carousel is functioning properly, when I click on the dropdown button, the dropdown-menu ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to reduce a varying percentage as the value continues to rise?

My memory of math may be a bit fuzzy, but I can't seem to recall how to solve this particular issue. In jQuery, I have been adding randomized clipping paths to my images using the following code: var max=100; var spread=5; jQuery.each( $("img"), func ...

jquerycssmath

Achieving 10 touchdowns within a set of 5 plays during a football game

Receiving a page from an external site where I have no control. The table structure is as follows: <table><tbody> <!-- headers --> <tr><td></td> <td></td> <td></td> <td>< ...

javascriptjqueryhtml

When <tr> is used as a link with the target="_blank" attribute

I'm facing an issue with my HTML and jQuery code. I'm trying to make a table row act as a link, but I'm struggling to figure out how to add the target="_blank" attribute. Could someone assist me in resolving this? Below is the snippet of H ...

jqueryhtmlhtml-table

The multi-line declaration prettier indicates that a newline is expected after the colon

When using Prettier to format code in a scss file, it is formatting this specific part: @font-face { font-family: 'Encode Sans Condensed'; src: url('/pf/resources/fonts/EncodeSansCondensed/EncodeSansCondensed-Thin.ttf') format('tr ...

csssassprettier

Utilize a personalized container for the slider's thumb within a React application

Is it possible to replace the slider thumb with a custom container/div in React instead of just styling the thumb or using a background image? I have found a codepen example that demonstrates what I am trying to achieve, but unfortunately I am having trou ...

htmlcssreactjsslider

Using JSON parsing to extract an integer as the key in JavaScript

I've been searching for almost 2 hours now, but I can't seem to find anyone using an integer as the key in their json object. The structure of my json object is as follows: {"342227492064425": {"added":"2020-10-04T23: ...

javascripthtmlarraysjson

How can I align a button right next to the table row data in HTML using Bootstrap?

Is there a way to add a button next to the table data in each row without a border? I attempted to create a new column for the button, but the border interferes with the design. I am using Bootstrap 4 for this project. Here is the HTML code: <div cl ...

javascripthtmlcssbootstrap-4bootstrap-table

My JavaScript seems to be having an issue with .className - can anyone help me troubleshoot

I'm currently working on a navigation menu, and my objective is to have the class change to .nav-link-active when a link is clicked, while also reverting the current .nav-link-active back to .nav-link. Here's the code snippet I am using: <he ...

javascripthtml

Issue with ThreeJs: Difficulty loading separate images on top and bottom surfaces

I've been trying to place different textures on the top and bottom sides using Threejs to display unique images on each side. However, I'm encountering an issue where the same image is being displayed on both the top and bottom sides. Below is th ...

javascripthtmlthree.jsimage-rendering