From 2bcd8c7d855db6c5a9b5d359492891fa23ee283a Mon Sep 17 00:00:00 2001 From: dkonopka Date: Tue, 9 Jul 2019 13:59:21 +0200 Subject: [PATCH 1/4] Changed `
` display property to `table` and `
` to `table-caption`. --- theme/image.css | 5 +++-- theme/imagecaption.css | 4 ++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/theme/image.css b/theme/image.css index 6e176be2..5ab6595c 100644 --- a/theme/image.css +++ b/theme/image.css @@ -4,11 +4,12 @@ */ .ck-content .image { + display: block; clear: both; text-align: center; - /* Make sure there is some space between the content and the image. */ - margin: 1em 0; + /* Make sure there is some space between the content and the image. Center image by default. */ + margin: 1em auto; & > img { /* Prevent unnecessary margins caused by line-height (see #44). */ diff --git a/theme/imagecaption.css b/theme/imagecaption.css index 5480c8ae..7e5511bb 100644 --- a/theme/imagecaption.css +++ b/theme/imagecaption.css @@ -4,6 +4,10 @@ */ .ck-content .image > figcaption { + display: table-caption; + caption-side: bottom; + word-break: break-word; + color: hsl(0, 0%, 20%); background-color: hsl(0, 0%, 97%); padding: .6em; From 3e2379eb087845c6b6338417215a4a0e6d962d77 Mon Sep 17 00:00:00 2001 From: dkonopka Date: Fri, 12 Jul 2019 13:16:49 +0200 Subject: [PATCH 2/4] Set proper display of image. --- theme/image.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/image.css b/theme/image.css index 5ab6595c..428b2c16 100644 --- a/theme/image.css +++ b/theme/image.css @@ -4,7 +4,7 @@ */ .ck-content .image { - display: block; + display: table; clear: both; text-align: center; From e503cf9c571da9fbfb92af62e1cd1991bad3ee60 Mon Sep 17 00:00:00 2001 From: dkonopka Date: Fri, 12 Jul 2019 13:18:12 +0200 Subject: [PATCH 3/4] Removed obsolete white-space. --- theme/imagecaption.css | 1 - 1 file changed, 1 deletion(-) diff --git a/theme/imagecaption.css b/theme/imagecaption.css index 7e5511bb..b723a2cd 100644 --- a/theme/imagecaption.css +++ b/theme/imagecaption.css @@ -7,7 +7,6 @@ display: table-caption; caption-side: bottom; word-break: break-word; - color: hsl(0, 0%, 20%); background-color: hsl(0, 0%, 97%); padding: .6em; From b9d19803f0ad971478dc17df500350570da76711 Mon Sep 17 00:00:00 2001 From: dkonopka Date: Fri, 19 Jul 2019 12:20:47 +0200 Subject: [PATCH 4/4] Added `min-width` to ``. --- theme/image.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/theme/image.css b/theme/image.css index 428b2c16..b2b1d8a2 100644 --- a/theme/image.css +++ b/theme/image.css @@ -20,5 +20,8 @@ /* Make sure the image never exceeds the size of the parent container (ckeditor/ckeditor5-ui#67). */ max-width: 100%; + + /* Make sure the caption will be displayed properly (See: https://github.com/ckeditor/ckeditor5/issues/1870). */ + min-width: 50px; } }