Courses/Design & Technique-Essential Web Design/CSS4print - Revision history

Andre at 11:33, 30 March 2020

2020-03-30T11:33:44Z

2019-10-07T21:11:42Z

CCS for print

← Older revision		Revision as of 21:11, 7 October 2019
Line 9:		Line 9:

	==CCS for print==		==CCS for print==
	Specific CSS rules allow you to specify how a webpage that was designed for screens, will be displayed in a page layout.		Specific CSS rules allow you to specify how a webpage that was designed for screens, will be displayed in a page layout.

			==What browser?==
			'''Chrome/Chromium''' seems to be the best for designing the CSS for print as it provides a '''print preview option.'''

	== @page==		== @page==

2019-10-07T21:10:10Z

@media queries

@@ Line 71: / Line 71: @@
 </source>
-== @media queries ==
+=How to write CSS Rules only for Print?=
 '''@media CSS rules''' or '''media queries''' defines specific contexts, under which specific CSS rules can be used.

2019-10-07T21:05:56Z

page breaks of the document

← Older revision		Revision as of 21:05, 7 October 2019
Line 122:		Line 122:

	<source lang="CSS">		<source lang="CSS">
	~~@print {~~
	h1, h2, h3, h4, h5 {		h1, h2, h3, h4, h5 {
	page-break-after: always;		page-break-after: always;
Line 130:		Line 130:
	page-break-inside: avoid;		page-break-inside: avoid;
	}		}
	}
	</source>		</source>

	http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#page-breaks		http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#page-breaks



	==More references to HTML-to-print==		==More references to HTML-to-print==
	http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#page-breaks		http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#page-breaks

2019-10-07T20:55:21Z

left and right @page

← Older revision		Revision as of 20:55, 7 October 2019
Line 35:		Line 35:
	http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#left-and-right-page-spreads		http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#left-and-right-page-spreads

	~~<source lang="css">~~
	== @page left @page right ==		== @page left @page right ==
	Option for the left and right pages, such as the margin sizes, which have to alternate in order to produce a bound work, are correctly rendered.		Option for the left and right pages, such as the margin sizes, which have to alternate in order to produce a bound work, are correctly rendered.
Line 52:		Line 52:

	[[File:weasyprint-margins.png\|600px]]		[[File:weasyprint-margins.png\|600px]]



	==specific pages ==		==specific pages ==

2019-09-29T13:40:02Z

← Older revision		Revision as of 13:40, 29 September 2019
Line 53:		Line 53:
	[[File:weasyprint-margins.png\|600px]]		[[File:weasyprint-margins.png\|600px]]

	~~</source>~~

	==specific pages ==		==specific pages ==
	'''Couldn't get specific pages work'''		'''Couldn't get specific pages work'''


	<source lang="css">		<source lang="css">
	@page :first {		@page :first {

2019-09-17T14:15:58Z

Assignment

← Older revision		Revision as of 14:15, 17 September 2019
Line 137:		Line 137:


	~~==Assignment==~~
	~~Transform the web-layout for a text, which you did as an assignment last week, or to ready to print PDF.~~

	~~Try to print it and integrate it onto the book project you are currently developing~~


	==More references to HTML-to-print==		==More references to HTML-to-print==
	http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#page-breaks		http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#page-breaks

2019-09-17T14:14:55Z

left and right @page

← Older revision		Revision as of 14:14, 17 September 2019
Line 36:		Line 36:

	<source lang="css">		<source lang="css">
			== @page left @page right ==
			Option for the left and right pages, such as the margin sizes, which have to alternate in order to produce a bound work, are correctly rendered.

	@page :~~left~~ {		<source lang="css">
	margin-left: 3cm;		@page:right {
			margin-left: 3cm; /inner margin/
			margin-right:1cm; /outer margin/
	}		}

	@page :right {		@page:left {
	margin-left: ~~4cm~~;		margin-right: 3cm; /inner margin/
			margin-left:1cm; /outer margin/
	}		}
			</source>

			[[File:weasyprint-margins.png\|600px]]


	</source>		</source>

2016-09-12T16:23:37Z

← Older revision	Revision as of 16:23, 12 September 2016
(No difference)

2015-10-06T06:12:36Z

HTML to print

← Older revision		Revision as of 06:12, 6 October 2015
Line 4:		Line 4:
	HTML to print allows you to create print layouts from your web pages.		HTML to print allows you to create print layouts from your web pages.

	You can create a PDF from ~~you page~~, by ~~print the page within~~ the browser ~~by choosing~~ «Print to file».		You can create a PDF from your web-pages with specific designs for print, by using the browser function «Print to file» and dedicated CSS instructions.

			We'll look into to them, however keep in mind that this system is still very unevenly implemented in browser. That can result in a lot of frustrations, discovery, surprises, and hacks.

	==CCS for print==		==CCS for print==