Paged Media CSS - Revision history

Manetta at 08:13, 26 November 2024

2024-11-26T08:13:02Z

← Older revision	Revision as of 10:13, 26 November 2024
Line 1:	Line 1:
		See: [[CSS Print]]

Manetta: Blanked the page

2024-11-26T08:12:48Z

Blanked the page

Show changes

Manetta: /* running headers and footers */

2023-10-06T09:12:12Z

running headers and footers

← Older revision		Revision as of 11:12, 6 October 2023
Line 134:		Line 134:
	@page{		@page{
	@top-center{		@top-center{
			background-color: lavendar;
	content: string(myTitle);		content: string(myTitle);
	}		}
	}		}
	h1{		h1{
	~~position~~: ~~running~~(~~myTitle~~);		string-set: myTitle content(text);
	}		}
	</syntaxhighlight>		</syntaxhighlight>

Manetta: /* @page margin at-rules */

2023-10-06T09:07:33Z

@page margin at-rules

← Older revision		Revision as of 11:07, 6 October 2023
Line 99:		Line 99:
	@bottom-center{		@bottom-center{
	background-color: aqua;		background-color: aqua;
	content: "~~My file~~."		content: "This is a small note in the bottom margin."
	}		}
	}		}

Manetta: /* Paged.js and Weasyprint (already support) */

2023-10-06T09:00:55Z

Paged.js and Weasyprint (already support)

← Older revision		Revision as of 11:00, 6 October 2023
Line 43:		Line 43:
	If you nevertheless do want to use these properties, you can use '''Paged.js''', a Javascript library also known as a ''polyfill'', that aims to ''fill'' the gaps between the working draft document and modern browsers. The project comes with extended documentation: https://pagedjs.org/documentation/.		If you nevertheless do want to use these properties, you can use '''Paged.js''', a Javascript library also known as a ''polyfill'', that aims to ''fill'' the gaps between the working draft document and modern browsers. The project comes with extended documentation: https://pagedjs.org/documentation/.

	Or you can use '''Weasyprint''', who also supports most of the CSS Paged Media properties described on this page. ~~Which properties are supported and which ones not are described in~~ the Weasyprint documentation [https://doc.courtbouillon.org/weasyprint/stable/api_reference.html#css-paged-media-module-level-3 here].		Or you can use '''Weasyprint''', who also supports most of the CSS Paged Media properties described on this page. In the Weasyprint documentation [https://doc.courtbouillon.org/weasyprint/stable/api_reference.html#css-paged-media-module-level-3 here] you can read which properties are supported and which ones not.

	===page rules===		===page rules===

Manetta: /* Paged.js and Weasyprint (already support) */

2023-10-06T09:00:09Z

Paged.js and Weasyprint (already support)

← Older revision		Revision as of 11:00, 6 October 2023
Line 39:		Line 39:
	It's good to say that you can still get pretty far with the properties that are supported atm. It really depends on what you want to make in the end.		It's good to say that you can still get pretty far with the properties that are supported atm. It really depends on what you want to make in the end.

	===Paged.js and Weasyprint (already support)===		====Paged.js and Weasyprint (already support)====

	If you nevertheless do want to use these properties, you can use '''Paged.js''', a Javascript library also known as a ''polyfill'', that aims to ''fill'' the gaps between the working draft document and modern browsers. The project comes with extended documentation: https://pagedjs.org/documentation/.		If you nevertheless do want to use these properties, you can use '''Paged.js''', a Javascript library also known as a ''polyfill'', that aims to ''fill'' the gaps between the working draft document and modern browsers. The project comes with extended documentation: https://pagedjs.org/documentation/.

Manetta: /* Modern browsers (no support yet) */

2023-10-06T08:59:56Z

Modern browsers (no support yet)

← Older revision		Revision as of 10:59, 6 October 2023
Line 31:		Line 31:
	===Not [yet] supported atm===		===Not [yet] supported atm===

	===Modern browsers (no support yet)===		====Modern browsers (no support yet)====

	Most of the Paged Media properties are not supported by modern (aka up-to-date) browsers unfortunately, as the W3C CSS Paged Media module is still in a "working draft" mode.		Most of the Paged Media properties are not supported by modern (aka up-to-date) browsers unfortunately, as the W3C CSS Paged Media module is still in a "working draft" mode.

Manetta: /* Not [yet] supported atm */

2023-10-06T08:59:35Z

Not [yet] supported atm

← Older revision		Revision as of 10:59, 6 October 2023
Line 30:		Line 30:

	===Not [yet] supported atm===		===Not [yet] supported atm===

			===Modern browsers (no support yet)===

	Most of the Paged Media properties are not supported by modern (aka up-to-date) browsers unfortunately, as the W3C CSS Paged Media module is still in a "working draft" mode.		Most of the Paged Media properties are not supported by modern (aka up-to-date) browsers unfortunately, as the W3C CSS Paged Media module is still in a "working draft" mode.
Line 37:		Line 39:
	It's good to say that you can still get pretty far with the properties that are supported atm. It really depends on what you want to make in the end.		It's good to say that you can still get pretty far with the properties that are supported atm. It really depends on what you want to make in the end.

	If you nevertheless do want to use these properties, you can use Paged.js, a Javascript library also known as a ''polyfill'', that aims to ''fill'' the gaps between the working draft document and modern browsers. The project comes with extended documentation: https://pagedjs.org/documentation/.		===Paged.js and Weasyprint (already support)===

			If you nevertheless do want to use these properties, you can use '''Paged.js''', a Javascript library also known as a ''polyfill'', that aims to ''fill'' the gaps between the working draft document and modern browsers. The project comes with extended documentation: https://pagedjs.org/documentation/.

	Or you can use Weasyprint, who also supports most of the CSS Paged Media properties described on this page. Which properties are supported and which ones not are described in the Weasyprint documentation [https://doc.courtbouillon.org/weasyprint/stable/api_reference.html#css-paged-media-module-level-3 here].		Or you can use '''Weasyprint''', who also supports most of the CSS Paged Media properties described on this page. Which properties are supported and which ones not are described in the Weasyprint documentation [https://doc.courtbouillon.org/weasyprint/stable/api_reference.html#css-paged-media-module-level-3 here].

	===page rules===		===page rules===

Manetta: /* Not [yet] supported atm */

2023-10-06T08:57:32Z

Not [yet] supported atm

← Older revision		Revision as of 10:57, 6 October 2023
Line 31:		Line 31:
	===Not [yet] supported atm===		===Not [yet] supported atm===

	Most of the Paged Media properties are not supported by modern browsers unfortunately, as the W3C CSS Paged Media module is still in a "working draft" mode.		Most of the Paged Media properties are not supported by modern (aka up-to-date) browsers unfortunately, as the W3C CSS Paged Media module is still in a "working draft" mode.

	You can check if a CSS property is supported by a specific browser at: https://caniuse.com/		You can check if a CSS property is supported by a specific browser at: https://caniuse.com/
Line 37:		Line 37:
	It's good to say that you can still get pretty far with the properties that are supported atm. It really depends on what you want to make in the end.		It's good to say that you can still get pretty far with the properties that are supported atm. It really depends on what you want to make in the end.

	If you nevertheless do want to use these properties, you can use Paged.js, a Javascript library also known as a ''polyfill'', that aims to ''fill'' the gaps between the working draft document and modern browsers. The project comes with extended documentation: https://pagedjs.org/documentation/.		If you nevertheless do want to use these properties, you can use Paged.js, a Javascript library also known as a ''polyfill'', that aims to ''fill'' the gaps between the working draft document and modern browsers. The project comes with extended documentation: https://pagedjs.org/documentation/.

			Or you can use Weasyprint, who also supports most of the CSS Paged Media properties described on this page. Which properties are supported and which ones not are described in the Weasyprint documentation [https://doc.courtbouillon.org/weasyprint/stable/api_reference.html#css-paged-media-module-level-3 here].

	===page rules===		===page rules===

Manetta: /* See also */

2023-10-06T08:44:45Z

← Older revision		Revision as of 10:44, 6 October 2023
Line 176:		Line 176:

	* [[Paged Media CSS examples]]		* [[Paged Media CSS examples]]
			* https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

	[[Category:Cookbook]]		[[Category:Cookbook]]
	[[Category:PagedMedia]]		[[Category:PagedMedia]]