Helpful resources ▼
  Download   Pricing   Buy

CSS Extensions and Vendor Prefixes in C#

CSS extensions let a rendering engine support vendor-specific or product-specific CSS features. Aspose.HTML for .NET uses the -aspose- prefix for CSS functions that can be used during rendering, for example to place the current page number or total page count in page margins.

Use Aspose.HTML CSS extensions when rendered output needs dynamic page marks. In C#, add -aspose- CSS functions such as currentPageNumber() or totalPagesNumber() to the document stylesheet, load the HTML with HTMLDocument, and render the document to PDF or another paged output format.

CSS Vendor Prefixes

CSS vendor prefixes, sometimes called CSS browser prefixes, are used in CSS property names to implement experimental or pre-release CSS features that are not yet standardized or may have limited support in certain browsers. In other words, prefixes make browser-specific features explicit.

Historically, browser vendors used the following prefixes for nonstandard CSS features:

According to the CSS specification, CSS vendor-specific extensions must start with a dash or underscore and use this format:

['-' or '_'] + [vendor identifier] + ['-'] + [name]

For example, -webkit-text-stroke is a vendor-prefixed property used to specify stroke width and color for text characters in WebKit-based browsers, and -moz-border-radius was a vendor-prefixed property used to round element corners in Mozilla-based browsers.

Aspose.HTML CSS Extensions

Aspose.HTML uses the -aspose- prefix for product-specific CSS functions that are evaluated during rendering. These functions are useful when you need page-aware output, such as page numbers in margins.

Function nameDescription
currentPageNumber()Returns the number of the current rendering page.
totalPagesNumber()Returns the total number of pages in the rendered document.

How to Add Page Marks with CSS Extensions

  1. Prepare an HTML document that contains CSS for paged rendering.
  2. Add -aspose- CSS functions to margin rules where page marks should appear.
  3. Load the HTML with HTMLDocument.
  4. Render or convert the document to a paged output format such as PDF.
  5. Check the output pages to confirm that current page and total page marks are rendered correctly.

The following C# example uses Aspose.HTML CSS extensions to create custom marks on document margins:

 1// How to add custom margin marks using CSS extensions
 2
 3// Initialize a configuration object and set up page-margins for a document
 4using (Configuration configuration = new Configuration())
 5{
 6    // Get the User Agent service
 7    IUserAgentService userAgent = configuration.GetService<IUserAgentService>();
 8
 9    // Set the style of custom margins and create marks on it
10    userAgent.UserStyleSheet = @"@page 
11                    {
12                        /* Page margins should be not empty in order to write content inside the margin-boxes */
13                        margin-top: 1cm;
14                        margin-left: 2cm;
15                        margin-right: 2cm;
16                        margin-bottom: 2cm;
17                        /* Page counter located at the bottom of the page */
18                        @bottom-right
19                        {
20                            -aspose-content: ""Page "" currentPageNumber() "" of "" totalPagesNumber();
21                            color: green;
22                        }
23
24                        /* Page title located at the top-center box */
25                        @top-center
26                        {
27                            -aspose-content: ""Hello, World Document Title!!!"";
28                            vertical-align: bottom;
29                            color: blue;
30                        }
31                    }";
32
33    //  Initialize an HTML document
34    using HTMLDocument document = new HTMLDocument("<div>Hello, World!!!</div>", ".", configuration);
35    
36    //  Initialize an output device
37    using (PdfDevice device = new PdfDevice(Path.Combine(OutputDir, "output.pdf")))
38    {
39        // Send the document to the output device
40        document.RenderTo(device);
41    }
42}
Example-SetPageMarginMarksUsingCssExtensions.cs hosted with ❤ by GitHub

Common CSS Extension Issues

IssueCauseFix
Page numbers do not appear in outputThe CSS rule is not applied during rendering or the output format is not page-based.Use the extension functions in CSS used by the rendered document and render to a paged format such as PDF.
The value is shown as plain textThe function syntax or -aspose- prefix is incorrect.Use supported Aspose.HTML CSS extension functions such as currentPageNumber() and totalPagesNumber().
Page marks appear in the wrong placeThe margin box or page CSS rule does not match the desired output area.Review the page margin CSS and test the output with representative document sizes.

Related Articles

HTML Form Editor Message Handlers