浏览代码

Other: Font size should include its content styles.

Maciej Gołaszewski 7 年之前
父节点
当前提交
3416fd288d

+ 0 - 17
packages/ckeditor5-font/docs/_snippets/features/build-font-source.html

@@ -1,17 +0,0 @@
-<style>
-	.text-tiny {
-		font-size: 0.7em;
-	}
-
-	.text-small {
-		font-size: 0.85em;
-	}
-
-	.text-big {
-		font-size: 1.4em;
-	}
-
-	.text-huge {
-		font-size: 1.8em;
-	}
-</style>

+ 17 - 3
packages/ckeditor5-font/docs/features/font.md

@@ -63,9 +63,7 @@ Each size is represented in the view as a `<span>` element with the `text-*` cla
 <span class="text-tiny">...</span>
 ```
 
-The CSS definition for the classes (presets) must be included:
-- in the web page's styles where the editor runs (backend),
-- in the web page's styles where the edited content is rendered (frontend)
+The CSS definition for the classes (presets) must be included in the web page's styles where the edited content is rendered.
 
 Here's an example of the font size CSS classes:
 
@@ -87,6 +85,22 @@ Here's an example of the font size CSS classes:
 }
 ```
 
+#### Using CSS Variables
+
+The font size feature is using the power of [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) which are defined in the [stylesheet](https://github.com/ckeditor/ckeditor5-font/blob/master/theme/fontsize.css). Thanks to that, both the UI and the content styles share the same font-size definitions, which can be easily customized:
+
+```css
+:root {
+	/* Make big text a bit bigger */
+	--ck-fontsize-big: 1.6em;
+	
+	/* Make huge text really huge. */
+	--ck-fontsize-huge: 3em;
+}
+```
+
+#### Example configuration
+
 An example of the editor that supports only two font sizes:
 
 ```js

+ 2 - 0
packages/ckeditor5-font/src/fontsize/fontsizeui.js

@@ -13,7 +13,9 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 
 import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import { normalizeOptions } from '../fontsize/utils';
+
 import fontSizeIcon from '../../theme/icons/font-size.svg';
+import '../../theme/fontsize.css';
 
 /**
  * The font family UI plugin. It introduces the `'fontSize'` drop-down.

+ 0 - 18
packages/ckeditor5-font/tests/manual/font-size-presets.html

@@ -1,21 +1,3 @@
-<style>
-	.text-tiny {
-		font-size: 0.7em;
-	}
-
-	.text-small {
-		font-size: 0.85em;
-	}
-
-	.text-big {
-		font-size: 1.4em;
-	}
-
-	.text-huge {
-		font-size: 1.8em;
-	}
-</style>
-
 <div id="editor">
 	<h2>Font <span class="text-big">Size</span> feature sample.</h2>
 

+ 22 - 0
packages/ckeditor5-font/theme/fontsize.css

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-fontsize-tiny: .7em;
+	--ck-fontsize-small: .85em;
+	--ck-fontsize-big: 1.4em;
+	--ck-fontsize-huge: 1.8em;
+}
+
+@define-mixin fontsize-preset $size {
+	.text-$size {
+		font-size: var(--ck-fontsize-$size);
+	}
+}
+
+@mixin fontsize-preset tiny;
+@mixin fontsize-preset small;
+@mixin fontsize-preset big;
+@mixin fontsize-preset huge;