Przeglądaj źródła

Implemented RTL styles for various UI components.

Aleksander Nowodzinski 6 lat temu
rodzic
commit
33867f21d9

+ 11 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-font/fontcolor.css

@@ -3,12 +3,22 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
  */
 
 
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
 .ck .ck-button.ck-color-table__remove-color {
 .ck .ck-button.ck-color-table__remove-color {
 	border-bottom: 1px solid var(--ck-color-base-border);
 	border-bottom: 1px solid var(--ck-color-base-border);
 	padding: calc(var(--ck-spacing-standard) / 2 ) var(--ck-spacing-standard);
 	padding: calc(var(--ck-spacing-standard) / 2 ) var(--ck-spacing-standard);
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
 
 
 	& .ck.ck-icon {
 	& .ck.ck-icon {
-		margin-right: var(--ck-spacing-standard);
+		@mixin ck-dir ltr {
+			margin-right: var(--ck-spacing-standard);
+		}
+
+		@mixin ck-dir rtl {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 	}
 }
 }
 
 

+ 25 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css

@@ -4,6 +4,7 @@
  */
  */
 
 
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 
 .ck.ck-text-alternative-form {
 .ck.ck-text-alternative-form {
 	padding: var(--ck-spacing-standard);
 	padding: var(--ck-spacing-standard);
@@ -13,8 +14,16 @@
 		outline: none;
 		outline: none;
 	}
 	}
 
 
-	& > :not(:first-child) {
-		margin-left: var(--ck-spacing-standard);
+	@mixin ck-dir ltr {
+		& > :not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& > :not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 	}
 
 
 	@mixin ck-media-phone {
 	@mixin ck-media-phone {
@@ -33,14 +42,25 @@
 		& .ck-button {
 		& .ck-button {
 			padding: var(--ck-spacing-standard);
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 
 			border-radius: 0;
 			border-radius: 0;
 			border: 0;
 			border: 0;
 			border-top: 1px solid var(--ck-color-base-border);
 			border-top: 1px solid var(--ck-color-base-border);
 
 
-			&:first-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
+			@mixin ck-dir ltr {
+				margin-left: 0;
+
+				&:first-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+
+				&:last-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
 			}
 			}
 		}
 		}
 	}
 	}

+ 25 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css

@@ -5,6 +5,7 @@
 
 
 @import "@ckeditor/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css";
 @import "@ckeditor/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 @import "../mixins/_focus.css";
 @import "../mixins/_focus.css";
 @import "../mixins/_shadow.css";
 @import "../mixins/_shadow.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
@@ -56,8 +57,16 @@
 		outline: none;
 		outline: none;
 	}
 	}
 
 
-	& .ck-button:not(.ck-link-actions__preview) {
-		margin-left: var(--ck-spacing-standard);
+	@mixin ck-dir ltr {
+		& .ck-button:not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& .ck-button:not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 	}
 
 
 	@mixin ck-media-phone {
 	@mixin ck-media-phone {
@@ -76,14 +85,25 @@
 		& .ck-button:not(.ck-link-actions__preview) {
 		& .ck-button:not(.ck-link-actions__preview) {
 			padding: var(--ck-spacing-standard);
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 
 			border-radius: 0;
 			border-radius: 0;
 			border: 0;
 			border: 0;
 			border-top: 1px solid var(--ck-color-base-border);
 			border-top: 1px solid var(--ck-color-base-border);
 
 
-			&:first-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
+			@mixin ck-dir ltr {
+				margin-left: 0;
+
+				&:first-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+
+				&:last-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
 			}
 			}
 		}
 		}
 	}
 	}

+ 39 - 7
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css

@@ -4,6 +4,7 @@
  */
  */
 
 
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 
 .ck.ck-link-form {
 .ck.ck-link-form {
 	padding: var(--ck-spacing-standard);
 	padding: var(--ck-spacing-standard);
@@ -13,8 +14,16 @@
 		outline: none;
 		outline: none;
 	}
 	}
 
 
-	& > :not(:first-child) {
-		margin-left: var(--ck-spacing-standard);
+	@mixin ck-dir ltr {
+		& > :not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& > :not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 	}
 
 
 	@mixin ck-media-phone {
 	@mixin ck-media-phone {
@@ -33,14 +42,25 @@
 		& .ck-button {
 		& .ck-button {
 			padding: var(--ck-spacing-standard);
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 
 			border-radius: 0;
 			border-radius: 0;
 			border: 0;
 			border: 0;
 			border-top: 1px solid var(--ck-color-base-border);
 			border-top: 1px solid var(--ck-color-base-border);
 
 
-			&:first-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
+			@mixin ck-dir ltr {
+				margin-left: 0;
+
+				&:first-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+
+				&:last-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
 			}
 			}
 		}
 		}
 	}
 	}
@@ -71,8 +91,20 @@
 		border-top: 1px solid var(--ck-color-base-border);
 		border-top: 1px solid var(--ck-color-base-border);
 		width: 50%;
 		width: 50%;
 
 
-		&:first-of-type {
-			border-right: 1px solid var(--ck-color-base-border);
+		@mixin ck-dir ltr {
+			margin-left: 0;
+
+			&:first-of-type {
+				border-right: 1px solid var(--ck-color-base-border);
+			}
+		}
+
+		@mixin ck-dir rtl {
+			margin-left: 0;
+
+			&:last-of-type {
+				border-right: 1px solid var(--ck-color-base-border);
+			}
 		}
 		}
 	}
 	}
 
 

+ 25 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css

@@ -4,6 +4,7 @@
  */
  */
 
 
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 
 .ck.ck-media-form {
 .ck.ck-media-form {
 	padding: var(--ck-spacing-standard);
 	padding: var(--ck-spacing-standard);
@@ -12,8 +13,16 @@
 		outline: none;
 		outline: none;
 	}
 	}
 
 
-	& > :not(:first-child) {
-		margin-left: var(--ck-spacing-standard);
+	@mixin ck-dir ltr {
+		& > :not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& > :not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
 	}
 	}
 
 
 	@mixin ck-media-phone {
 	@mixin ck-media-phone {
@@ -37,14 +46,25 @@
 		& .ck-button {
 		& .ck-button {
 			padding: var(--ck-spacing-standard);
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);
-			margin-left: 0;
 
 
 			border-radius: 0;
 			border-radius: 0;
 			border: 0;
 			border: 0;
 			border-top: 1px solid var(--ck-color-base-border);
 			border-top: 1px solid var(--ck-color-base-border);
 
 
-			&:first-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
+			@mixin ck-dir ltr {
+				margin-left: 0;
+
+				&:first-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+
+				&:last-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
 			}
 			}
 		}
 		}
 	}
 	}

+ 18 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css

@@ -8,6 +8,7 @@
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_rounded.css";
 @import "../../mixins/_button.css";
 @import "../../mixins/_button.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 
 .ck.ck-button,
 .ck.ck-button,
 a.ck.ck-button {
 a.ck.ck-button {
@@ -71,8 +72,15 @@ a.ck.ck-button {
 		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
 		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
 
 
 		& .ck-button__icon {
 		& .ck-button__icon {
-			margin-left: calc(-1 * var(--ck-spacing-small));
-			margin-right: var(--ck-spacing-small);
+			@mixin ck-dir ltr {
+				margin-left: calc(-1 * var(--ck-spacing-small));
+				margin-right: var(--ck-spacing-small);
+			}
+
+			@mixin ck-dir rtl {
+				margin-right: calc(-1 * var(--ck-spacing-small));
+				margin-left: var(--ck-spacing-small);
+			}
 		}
 		}
 	}
 	}
 
 
@@ -107,6 +115,14 @@ a.ck.ck-button {
 		/* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and
 		/* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and
 		without labels (but with icons) have different sizes in Chrome */
 		without labels (but with icons) have different sizes in Chrome */
 		vertical-align: middle;
 		vertical-align: middle;
+
+		@mixin ck-dir ltr {
+			text-align: left;
+		}
+
+		@mixin ck-dir rtl {
+			text-align: right;
+		}
 	}
 	}
 }
 }
 
 

+ 27 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css

@@ -5,6 +5,7 @@
 
 
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_disabled.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 
 /* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
 /* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
 of the component, floating–point numbers have been used which, for the default font size
 of the component, floating–point numbers have been used which, for the default font size
@@ -15,12 +16,20 @@ of the component, floating–point numbers have been used which, for the default
 	/* 14px at 13px font-size */
 	/* 14px at 13px font-size */
 	--ck-switch-button-toggle-inner-size: 1.0769230769em;
 	--ck-switch-button-toggle-inner-size: 1.0769230769em;
 	--ck-switch-button-toggle-spacing: 1px;
 	--ck-switch-button-toggle-spacing: 1px;
+	--ck-switch-button-translation: 1.3846153847em;
 }
 }
 
 
 .ck.ck-button.ck-switchbutton {
 .ck.ck-button.ck-switchbutton {
 	& .ck-button__label {
 	& .ck-button__label {
-		/* Separate the label from the switch */
-		margin-right: calc(2*var(--ck-spacing-large));
+		@mixin ck-dir ltr {
+			/* Separate the label from the switch */
+			margin-right: calc(2*var(--ck-spacing-large));
+		}
+
+		@mixin ck-dir rtl {
+			/* Separate the label from the switch */
+			margin-left: calc(2*var(--ck-spacing-large));
+		}
 	}
 	}
 
 
 	&.ck-disabled .ck-button__toggle {
 	&.ck-disabled .ck-button__toggle {
@@ -30,8 +39,15 @@ of the component, floating–point numbers have been used which, for the default
 	& .ck-button__toggle {
 	& .ck-button__toggle {
 		@mixin ck-rounded-corners;
 		@mixin ck-rounded-corners;
 
 
-		/* Make sure the toggle is always to the right as far as possible. */
-		margin-left: auto;
+		@mixin ck-dir ltr {
+			/* Make sure the toggle is always to the right as far as possible. */
+			margin-left: auto;
+		}
+
+		@mixin ck-dir rtl {
+			/* Make sure the toggle is always to the left as far as possible. */
+			margin-right: auto;
+		}
 
 
 		/* Gently animate the background color of the toggle switch */
 		/* Gently animate the background color of the toggle switch */
 		transition: background 400ms ease;
 		transition: background 400ms ease;
@@ -83,7 +99,13 @@ of the component, floating–point numbers have been used which, for the default
 			 * 		2*var(--ck-switch-button-toggle-spacing) )
 			 * 		2*var(--ck-switch-button-toggle-spacing) )
 			 * 	)
 			 * 	)
 			 */
 			 */
-			transform: translateX( 1.3846153847em );
+			@mixin ck-dir ltr {
+				transform: translateX( var( --ck-switch-button-translation ) );
+			}
+
+			@mixin ck-dir rtl {
+				transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) );
+			}
 		}
 		}
 	}
 	}
 }
 }

+ 30 - 6
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css

@@ -6,6 +6,7 @@
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_shadow.css";
 @import "../../../mixins/_shadow.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 
 :root {
 :root {
 	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
 	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
@@ -16,11 +17,25 @@
 	font-size: inherit;
 	font-size: inherit;
 
 
 	& .ck-dropdown__arrow {
 	& .ck-dropdown__arrow {
-		right: var(--ck-spacing-standard);
 		width: var(--ck-dropdown-arrow-size);
 		width: var(--ck-dropdown-arrow-size);
+	}
+
+	@mixin ck-dir ltr {
+		& .ck-dropdown__arrow {
+			right: var(--ck-spacing-standard);
 
 
-		/* A space to accommodate the triangle. */
-		margin-left: var(--ck-spacing-small);
+			/* A space to accommodate the triangle. */
+			margin-left: var(--ck-spacing-small);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& .ck-dropdown__arrow {
+			left: var(--ck-spacing-standard);
+
+			/* A space to accommodate the triangle. */
+			margin-right: var(--ck-spacing-small);
+		}
 	}
 	}
 
 
 	&.ck-disabled .ck-dropdown__arrow {
 	&.ck-disabled .ck-dropdown__arrow {
@@ -28,9 +43,18 @@
 	}
 	}
 
 
 	& .ck-button.ck-dropdown__button {
 	& .ck-button.ck-dropdown__button {
-		&:not(.ck-button_with-text) {
-			/* Make sure dropdowns with just an icon have the right inner spacing */
-			padding-left: var(--ck-spacing-small);
+		@mixin ck-dir ltr {
+			&:not(.ck-button_with-text) {
+				/* Make sure dropdowns with just an icon have the right inner spacing */
+				padding-left: var(--ck-spacing-small);
+			}
+		}
+
+		@mixin ck-dir rtl {
+			&:not(.ck-button_with-text) {
+				/* Make sure dropdowns with just an icon have the right inner spacing */
+				padding-right: var(--ck-spacing-small);
+			}
 		}
 		}
 
 
 		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
 		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */

+ 33 - 8
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css

@@ -11,12 +11,21 @@
 }
 }
 
 
 .ck.ck-splitbutton {
 .ck.ck-splitbutton {
+	/*
+	 * Note: ck-rounder and ck-dir mixins don't go together (because they both use @nest).
+	 */
 	& > .ck-splitbutton__action {
 	& > .ck-splitbutton__action {
-		/* Don't round the first button on the right side */
-		@mixin ck-rounded-corners {
+		@nest [dir="ltr"].ck-rounder-corners & {
+			/* Don't round the action button on the right side */
 			border-top-right-radius: unset;
 			border-top-right-radius: unset;
 			border-bottom-right-radius: unset;
 			border-bottom-right-radius: unset;
 		}
 		}
+
+		@nest [dir="rtl"].ck-rounded-corners & {
+			/* Don't round the action button on the left side */
+			border-top-left-radius: unset;
+			border-bottom-left-radius: unset;
+		}
 	}
 	}
 
 
 	& > .ck-splitbutton__arrow {
 	& > .ck-splitbutton__arrow {
@@ -24,10 +33,18 @@
 		it must get some arbitrary min-width. */
 		it must get some arbitrary min-width. */
 		min-width: unset;
 		min-width: unset;
 
 
-		/* Don't round the arrow button on the right side */
-		@mixin ck-rounded-corners {
-			border-top-left-radius: unset;
-			border-bottom-left-radius: unset;
+		@nest [dir="ltr"].ck-rounder-corners & {
+			/* Don't round the arrow button on the left side */
+			@mixin ck-rounded-corners {
+				border-top-left-radius: unset;
+				border-bottom-left-radius: unset;
+			}
+		}
+
+		@nest [dir="rtl"].ck-rounded-corners & {
+			/* Don't round the arrow button on the right side */
+			border-top-right-radius: unset;
+			border-bottom-right-radius: unset;
 		}
 		}
 
 
 		& svg {
 		& svg {
@@ -45,8 +62,16 @@
 			background: var(--ck-color-split-button-hover-background);
 			background: var(--ck-color-split-button-hover-background);
 		}
 		}
 
 
-		& > .ck-splitbutton__arrow:not(.ck-disabled) {
-			border-left-color: var(--ck-color-split-button-hover-border);
+		@nest [dir="ltr"].ck-rounder-corners & {
+			& > .ck-splitbutton__arrow:not(.ck-disabled) {
+				border-left-color: var(--ck-color-split-button-hover-border);
+			}
+		}
+
+		@nest [dir="rtl"].ck-rounded-corners & {
+			& > .ck-splitbutton__arrow:not(.ck-disabled) {
+				border-right-color: var(--ck-color-split-button-hover-border);
+			}
 		}
 		}
 	}
 	}
 
 

+ 25 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css

@@ -4,6 +4,7 @@
  */
  */
 
 
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_rounded.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 
 .ck.ck-toolbar {
 .ck.ck-toolbar {
 	@mixin ck-rounded-corners;
 	@mixin ck-rounded-corners;
@@ -13,14 +14,25 @@
 	border: 1px solid var(--ck-color-toolbar-border);
 	border: 1px solid var(--ck-color-toolbar-border);
 
 
 	& > * {
 	& > * {
-		/* (#11) Separate toolbar items. */
-		margin-right: var(--ck-spacing-small);
-
 		/* Make sure items wrapped to the next line have v-spacing */
 		/* Make sure items wrapped to the next line have v-spacing */
 		margin-top: var(--ck-spacing-small);
 		margin-top: var(--ck-spacing-small);
 		margin-bottom: var(--ck-spacing-small);
 		margin-bottom: var(--ck-spacing-small);
 	}
 	}
 
 
+	@mixin ck-dir ltr {
+		& > * {
+			/* (#11) Separate toolbar items. */
+			margin-right: var(--ck-spacing-small);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& > * {
+			/* (#11) Separate toolbar items. */
+			margin-left: var(--ck-spacing-small);
+		}
+	}
+
 	&.ck-toolbar_vertical {
 	&.ck-toolbar_vertical {
 		/* Items in a vertical toolbar span the entire width. */
 		/* Items in a vertical toolbar span the entire width. */
 		padding: 0;
 		padding: 0;
@@ -41,8 +53,16 @@
 		}
 		}
 	}
 	}
 
 
-	& > *:last-child {
-		margin-right: 0;
+	@mixin ck-dir ltr {
+		& > *:last-child {
+			margin-right: 0;
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& > *:last-child {
+			margin-left: 0;
+		}
 	}
 	}
 
 
 	@nest .ck-toolbar-container & {
 	@nest .ck-toolbar-container & {

+ 8 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css

@@ -82,3 +82,11 @@
 	    border: 0
 	    border: 0
 	}
 	}
 }
 }
+
+/**
+ * Default rules for RTL languages.
+ */
+.ck[dir="rtl"],
+.ck[dir="rtl"] * {
+	text-align: right;
+}