Skip to content

Commit 0956514

Browse files
BafSBafS
committed
Add "avoid-break-inside" utility and aliases
1 parent aa436a9 commit 0956514

File tree

3 files changed

+37
-14
lines changed

3 files changed

+37
-14
lines changed

‎README.md‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Gutenberg.css is the base stylesheet but there are themes available in the `them
1717

1818
Example with Gutenberg and "old style" theme :
1919

20-
```HTML
20+
```html
2121
<link rel="stylesheet" href="dist/gutenberg.css" media="print">
2222
<link rel="stylesheet" href="dist/themes/oldstyle.css" media="print"> <!-- optional -->
2323
```
@@ -40,7 +40,7 @@ npm install gutenberg-css
4040

4141
You can also use the unpkg service as a *CDN*.
4242

43-
```HTML
43+
```html
4444
<link rel="stylesheet" href="https://unpkg.com/gutenberg-css@0.6" media="print">
4545
<link rel="stylesheet" href="https://unpkg.com/gutenberg-css@0.6/dist/themes/oldstyle.min.css" media="print">
4646
```
@@ -54,29 +54,42 @@ To hide elements to be printed you can simply add the class `no-print`.
5454

5555
### Force break page
5656

57-
Gutenberg provides two ways to break a page, the class `page-break-before` will to break before and `page-break-after` to break after.
57+
Gutenberg provides two ways to break a page, the class `break-before` will to break before and `break-after` to break after.
5858

5959
Example:
6060

61-
```HTML
61+
```html
6262
<!-- The title will be on a new page -->
63-
<h1 class="page-break-before">My title</h1>
63+
<h1 class="break-before">My title</h1>
6464

65-
<p class="page-break-after">I will break after this paragraph</p>
65+
<p class="break-after">I will break after this paragraph</p>
6666
<!-- Break here, the next paragraph will be on a new page -->
6767
<p>I am on a new page</p>
6868
```
6969

70+
### Avoid break inside
71+
72+
To avoid the page to break "inside" an element, you can use the `avoid-break-inside` class.
73+
74+
Example:
75+
76+
```html
77+
<div class="avoid-break-inside">
78+
<img src="gutenberg.png" />
79+
80+
<p>I really don't want this part to be cut</p>
81+
</div>
82+
```
83+
7084
### Not reformat links or acronym
7185

72-
If you do not want to reformat the links, acronym or abbreviation to show the full url or title, you
73-
can use the class `no-reformat`.
86+
If you do not want to reformat the links, acronym or abbreviation to show the full url or title, you can use the class `no-reformat`.
7487

7588
### Force to print background
7689

77-
To force backgrounds to be printed (can be useful when you "print" a pdf), add this CSS (compatible with Safari and Chrome) :
90+
To force backgrounds to be printed (can be useful when you "print" a pdf), add this CSS (compatible with Safari and Chrome):
7891

79-
```CSS
92+
```css
8093
-webkit-print-color-adjust: exact;
8194
print-color-adjust: exact;
8295
```

‎docs/index.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Gutenberg demo</title>
55
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mu/0.3.0/mu.min.css" />
66
<link rel="stylesheet" href="//unpkg.com/gutenberg-css" media="print" charset="utf-8">
7-
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
7+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css">
88
</head>
99
<body>
1010
<h1>Gutenberg Framework</h1>
@@ -30,12 +30,16 @@ <h4>Force break page</h4>
3030
Example:
3131

3232
<pre><code class="html">&lt;!-- The title will be on a new page --&gt;
33-
&lt;h1 class="page-break-before"&gt;My title&lt;/h1&gt;
33+
&lt;h1 class="break-before"&gt;My title&lt;/h1&gt;
3434

35-
&lt;p class="page-break-after"&gt;I will break after this paragraph&lt;/p&gt;
35+
&lt;p class="break-after"&gt;I will break after this paragraph&lt;/p&gt;
3636
&lt;!-- Break here, the next paragraph will be on a new page --&gt;
3737
&lt;p&gt;I am on a new page&lt;/p&gt;</code></pre>
3838

39+
<h4>Avoid break inside</h4>
40+
41+
To avoid the page to break "inside" an element, you can use the <code>avoid-break-inside</code> class.
42+
3943
<h4>Not reformat links or acronym</h4>
4044

4145
If you do not want to reformat the links, acronym or abbreviation to show the full url or title, you
@@ -48,7 +52,7 @@ <h4>Force to print background</h4>
4852
<pre><code class="css">-webkit-print-color-adjust: exact;
4953
print-color-adjust: exact;</code></pre>
5054

51-
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
55+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
5256
<script>hljs.initHighlightingOnLoad();</script>
5357
</body>
5458
</html>

‎scss/_utilities.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
.page-break,
2+
.break-before,
23
.page-break-before {
34
page-break-before: always;
45
}
56

7+
.break-after,
68
.page-break-after {
79
page-break-after: always;
810
}
911

12+
.avoid-break-inside {
13+
page-break-inside: avoid;
14+
}
15+
1016
.no-print {
1117
display: none;
1218
}

0 commit comments

Comments
 (0)