浏览代码

add support for auto-sized big text via r-fit-text

Hakim El Hattab 5 年之前
父节点
当前提交
1b6a3b1e6f

+ 10 - 0
css/theme/template/theme.scss

@@ -79,6 +79,16 @@
 	line-height: 1.3;
 }
 
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+	margin-bottom: 0;
+}
+
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,

文件差异内容过多而无法显示
+ 0 - 0
dist/reveal.esm.js


文件差异内容过多而无法显示
+ 0 - 0
dist/reveal.js


+ 9 - 0
dist/theme/beige.css

@@ -108,6 +108,15 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   margin: 20px 0;
   line-height: 1.3; }
 
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+  margin-bottom: 0; }
+
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,

+ 9 - 0
dist/theme/black.css

@@ -101,6 +101,15 @@ section.has-light-background, section.has-light-background h1, section.has-light
   margin: 20px 0;
   line-height: 1.3; }
 
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+  margin-bottom: 0; }
+
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,

+ 9 - 0
dist/theme/blood.css

@@ -107,6 +107,15 @@ section.has-light-background, section.has-light-background h1, section.has-light
   margin: 20px 0;
   line-height: 1.3; }
 
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+  margin-bottom: 0; }
+
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,

+ 9 - 0
dist/theme/league.css

@@ -110,6 +110,15 @@ section.has-light-background, section.has-light-background h1, section.has-light
   margin: 20px 0;
   line-height: 1.3; }
 
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+  margin-bottom: 0; }
+
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,

+ 9 - 0
dist/theme/moon.css

@@ -108,6 +108,15 @@ section.has-light-background, section.has-light-background h1, section.has-light
   margin: 20px 0;
   line-height: 1.3; }
 
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+  margin-bottom: 0; }
+
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,

+ 9 - 0
dist/theme/night.css

@@ -102,6 +102,15 @@ section.has-light-background, section.has-light-background h1, section.has-light
   margin: 20px 0;
   line-height: 1.3; }
 
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+  margin-bottom: 0; }
+
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,

+ 9 - 0
dist/theme/serif.css

@@ -104,6 +104,15 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   margin: 20px 0;
   line-height: 1.3; }
 
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+  margin-bottom: 0; }
+
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,

+ 9 - 0
dist/theme/simple.css

@@ -104,6 +104,15 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   margin: 20px 0;
   line-height: 1.3; }
 
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+  margin-bottom: 0; }
+
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,

+ 9 - 0
dist/theme/sky.css

@@ -111,6 +111,15 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   margin: 20px 0;
   line-height: 1.3; }
 
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+  margin-bottom: 0; }
+
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,

+ 9 - 0
dist/theme/solarized.css

@@ -105,6 +105,15 @@ html * {
   margin: 20px 0;
   line-height: 1.3; }
 
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+  margin-bottom: 0; }
+
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,

+ 9 - 0
dist/theme/white.css

@@ -101,6 +101,15 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   margin: 20px 0;
   line-height: 1.3; }
 
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+  margin-bottom: 0; }
+
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,

+ 14 - 0
examples/layout-helpers.html

@@ -22,6 +22,7 @@
 				<section>
 					<h2>Layout Helper Examples</h2>
 					<ul>
+						<li><a href="#/fit-text">Big Text</a></li>
 						<li><a href="#/stretch">Stretch</a></li>
 						<li><a href="#/stack">Stack</a></li>
 						<li><a href="#/hstack">HStack</a></li>
@@ -29,6 +30,19 @@
 					</ul>
 				</section>
 
+				<section id="fit-text">
+					<h2>Fit Text</h2>
+					<p>Resizes text to be as large as possible within its container.</p>
+					<pre><code class="html" data-trim data-line-numbers>
+					  <h2 class="r-fit-text">FIT-TEXT</h2>
+					</code></pre>
+				</section>
+
+				<section>
+					<h2 class="r-fit-text">HELLO WORLD</h2>
+					<h2 class="r-fit-text">BOTH THESE TITLES USE FIT-TEXT</h2>
+				</section>
+
 				<section id="stretch">
 					<h2>Stretch</h2>
 					<p>Makes an element as tall as possible while remaining within the slide bounds.</p>

+ 11 - 0
js/reveal.js

@@ -25,6 +25,8 @@ import {
 	POST_MESSAGE_METHOD_BLACKLIST
 } from './utils/constants.js'
 
+import fitty from 'fitty';
+
 // The reveal.js version
 export const VERSION = '4.0.2';
 
@@ -281,6 +283,15 @@ export default function( revealElement, options ) {
 		dom.statusElement = createStatusElement();
 
 		dom.wrapper.setAttribute( 'role', 'application' );
+
+		// The r-fit-text helper resizes text to be as large as
+		// possible within its given container
+		fitty( '.r-fit-text', {
+			minSize: 24,
+			maxSize: config.height * 0.8,
+			observeMutations: false,
+			observeWindow: false
+		} );
 	}
 
 	/**

+ 7 - 1
package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "reveal.js",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3068,6 +3068,12 @@
         "parse-filepath": "^1.0.1"
       }
     },
+    "fitty": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/fitty/-/fitty-2.3.0.tgz",
+      "integrity": "sha512-a4axS2xr0Lcp95We4hIrAvpgdzp6WHPaHp9neb5kMdjefCsNLoD4lPx69yKtKe60X/ZMEJznsPot6C1Tw5KZOA==",
+      "dev": true
+    },
     "flagged-respawn": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz",

+ 1 - 0
package.json

@@ -39,6 +39,7 @@
     "babel-plugin-transform-html-import-to-string": "0.0.1",
     "colors": "^1.4.0",
     "core-js": "^3.6.5",
+    "fitty": "^2.3.0",
     "glob": "^7.1.6",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^7.0.1",

部分文件因为文件数量过多而无法显示