IronSoftware

Posted on Dec 7

How to Rotate Text in PDF with C# (.NET Example)

#csharp #webdev #dotnet

Rotated text creates visual effects—diagonal watermarks, vertical labels, angled headers. CSS transforms make this straightforward when generating PDFs from HTML.

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

var html = @"
<div style='transform: rotate(-45deg); font-size: 72px; color: rgba(0,0,0,0.1);'>
    CONFIDENTIAL
</div>";

var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("watermark.pdf");

CSS3's transform: rotate() works exactly as it does on the web.

How Do I Rotate Text with CSS?

Use CSS transforms for any rotation angle:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

var html = @"
<html>
<head>
    <style>
        .rotate-45 { transform: rotate(-45deg); }
        .rotate-90 { transform: rotate(90deg); }
        .rotate-180 { transform: rotate(180deg); }
        .vertical {
            transform: rotate(-90deg);
            transform-origin: left top;
        }
    </style>
</head>
<body>
    <div class='rotate-45'>Diagonal Text</div>
    <div class='rotate-90'>Sideways Text</div>
    <div class='vertical'>Vertical Label</div>
</body>
</html>";

var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("rotated-text.pdf");

Negative angles rotate counter-clockwise.

How Do I Create a Diagonal Watermark?

Classic watermark effect:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

var html = @"
<html>
<head>
    <style>
        .watermark {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            font-size: 100px;
            color: rgba(200, 0, 0, 0.15);
            font-weight: bold;
            font-family: Arial, sans-serif;
            white-space: nowrap;
            z-index: -1;
            pointer-events: none;
        }
        .content {
            padding: 40px;
        }
    </style>
</head>
<body>
    <div class='watermark'>DRAFT</div>
    <div class='content'>
        <h1>Document Title</h1>
        <p>Main content goes here...</p>
    </div>
</body>
</html>";

var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("draft-document.pdf");

The watermark centers on the page and appears behind the content.

How Do I Create Vertical Sidebar Labels?

Rotated text for margins or sidebars:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

var html = @"
<html>
<head>
    <style>
        body {
            margin-left: 60px;
        }
        .sidebar-label {
            position: fixed;
            left: 10px;
            top: 50%;
            transform: rotate(-90deg);
            transform-origin: left center;
            font-size: 12px;
            color: #666;
            white-space: nowrap;
        }
        .classification {
            position: fixed;
            right: 10px;
            top: 50%;
            transform: rotate(90deg);
            transform-origin: right center;
            font-size: 14px;
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>
    <div class='sidebar-label'>Document ID: DOC-2024-001</div>
    <div class='classification'>CONFIDENTIAL</div>
    <h1>Report Content</h1>
    <p>Document body...</p>
</body>
</html>";

var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("labeled-document.pdf");

How Do I Rotate Table Headers?

Angled headers for narrow columns:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

var html = @"
<html>
<head>
    <style>
        table { border-collapse: collapse; margin-top: 100px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }

        th {
            height: 80px;
            white-space: nowrap;
        }

        th span {
            display: block;
            transform: rotate(-45deg);
            transform-origin: bottom left;
            width: 30px;
        }

        td { width: 40px; }
    </style>
</head>
<body>
    <table>
        <tr>
            <th><span>January</span></th>
            <th><span>February</span></th>
            <th><span>March</span></th>
            <th><span>April</span></th>
            <th><span>May</span></th>
        </tr>
        <tr>
            <td>85</td>
            <td>92</td>
            <td>78</td>
            <td>95</td>
            <td>88</td>
        </tr>
    </table>
</body>
</html>";

var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("angled-headers.pdf");

Angled headers save horizontal space in data-dense tables.

How Do I Position Rotated Text?

Control rotation origin and placement:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var html = @"
<style>
    /* Rotate around center (default) */
    .center-rotate {
        transform: rotate(45deg);
        transform-origin: center center;
    }

    /* Rotate around top-left corner */
    .corner-rotate {
        transform: rotate(45deg);
        transform-origin: top left;
    }

    /* Rotate around bottom */
    .bottom-rotate {
        transform: rotate(45deg);
        transform-origin: bottom center;
    }

    /* Absolute positioning with rotation */
    .positioned {
        position: absolute;
        top: 100px;
        left: 200px;
        transform: rotate(-30deg);
    }
</style>";

transform-origin determines the pivot point for rotation.

How Do I Create Rotated Stamps?

Add rotated approval stamps using HTML stamper:

using IronPdf;
using IronPdf.Stamps;
// Install via NuGet: Install-Package IronPdf

var pdf = PdfDocument.FromFile("document.pdf");

var stamp = new HtmlStamper
{
    Html = @"
        <div style='
            transform: rotate(-15deg);
            border: 3px solid red;
            color: red;
            padding: 5px 20px;
            font-size: 24px;
            font-weight: bold;
            font-family: Arial;
        '>
            APPROVED
        </div>",
    HorizontalAlignment = HorizontalAlignment.Right,
    VerticalAlignment = VerticalAlignment.Top,
    HorizontalOffset = new Length(-50),
    VerticalOffset = new Length(-50)
};

pdf.ApplyStamp(stamp);
pdf.SaveAs("approved-document.pdf");

How Do I Create Angled Text Boxes?

Rotated callouts and labels:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

var html = @"
<html>
<head>
    <style>
        .callout {
            position: absolute;
            transform: rotate(-5deg);
            background: #ffffcc;
            border: 2px solid #ccc;
            border-radius: 5px;
            padding: 15px;
            box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
            max-width: 200px;
        }

        .callout-1 { top: 100px; left: 50px; }
        .callout-2 { top: 200px; left: 300px; transform: rotate(3deg); }

        .ribbon {
            position: absolute;
            top: 20px;
            right: -35px;
            width: 150px;
            padding: 5px;
            background: red;
            color: white;
            text-align: center;
            transform: rotate(45deg);
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class='ribbon'>NEW</div>
    <div class='callout callout-1'>Note: Review this section carefully.</div>
    <div class='callout callout-2'>Important update here.</div>
    <h1 style='margin-top: 150px;'>Main Content</h1>
</body>
</html>";

var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("annotated-document.pdf");

How Do I Rotate Multiple Watermarks?

Repeating diagonal pattern:

using IronPdf;
// Install via NuGet: Install-Package IronPdf

var renderer = new ChromePdfRenderer();

var html = @"
<html>
<head>
    <style>
        .watermark-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        .watermark-text {
            position: absolute;
            font-size: 40px;
            color: rgba(0, 0, 0, 0.05);
            transform: rotate(-45deg);
            white-space: nowrap;
        }

        /* Position multiple watermarks */
        .w1 { top: 10%; left: 10%; }
        .w2 { top: 30%; left: 50%; }
        .w3 { top: 50%; left: 20%; }
        .w4 { top: 70%; left: 60%; }
        .w5 { top: 90%; left: 30%; }
    </style>
</head>
<body>
    <div class='watermark-container'>
        <div class='watermark-text w1'>SAMPLE SAMPLE SAMPLE</div>
        <div class='watermark-text w2'>SAMPLE SAMPLE SAMPLE</div>
        <div class='watermark-text w3'>SAMPLE SAMPLE SAMPLE</div>
        <div class='watermark-text w4'>SAMPLE SAMPLE SAMPLE</div>
        <div class='watermark-text w5'>SAMPLE SAMPLE SAMPLE</div>
    </div>
    <h1>Document Content</h1>
    <p>This document has a repeating watermark pattern.</p>
</body>
</html>";

var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("tiled-watermark.pdf");

How Do I Create Rotated Text Stamps?

Use TextStamper with rotation:

using IronPdf;
using IronPdf.Stamps;
// Install via NuGet: Install-Package IronPdf

var pdf = PdfDocument.FromFile("document.pdf");

var stamp = new TextStamper
{
    Text = "CONFIDENTIAL",
    FontSize = 60,
    FontColor = Color.Red,
    Opacity = 20,
    Rotation = -45,  // Diagonal
    HorizontalAlignment = HorizontalAlignment.Center,
    VerticalAlignment = VerticalAlignment.Middle
};

pdf.ApplyStamp(stamp);
pdf.SaveAs("confidential-document.pdf");

The Rotation property accepts degrees (negative = counter-clockwise).

How Do I Combine Rotation with Other Transforms?

Chain multiple CSS transforms:

var html = @"
<style>
    /* Rotate and scale */
    .rotate-scale {
        transform: rotate(30deg) scale(1.5);
    }

    /* Rotate and translate */
    .rotate-move {
        transform: rotate(-45deg) translateX(50px);
    }

    /* Skew and rotate */
    .skew-rotate {
        transform: skewX(10deg) rotate(15deg);
    }

    /* 3D rotation (perspective required) */
    .rotate-3d {
        transform: perspective(500px) rotateY(20deg);
    }
</style>";

Multiple transforms apply in order (right to left).

Quick Reference

Effect	CSS
Diagonal watermark	`transform: rotate(-45deg)`
Vertical text (left)	`transform: rotate(-90deg)`
Vertical text (right)	`transform: rotate(90deg)`
Upside down	`transform: rotate(180deg)`
Angled header	`transform: rotate(-45deg)`
Custom angle	`transform: rotate(Xdeg)`

Transform Origin	Effect
`center center`	Rotate around center (default)
`top left`	Pivot at top-left corner
`bottom center`	Pivot at bottom center
`50% 100%`	Custom pivot point

CSS transforms give you complete control over text rotation. Any angle, any position, any style.

For more text rotation examples, see the IronPDF rotating text documentation.

Written by Jacob Mellor, CTO at Iron Software. Jacob created IronPDF and leads a team of 50+ engineers building .NET document processing libraries.

DEV Community