Problem/Motivation

On a largish screen size, the initial font size for regular body text in a text area is 12px, which is smaller than all of the other text on the content creation page. When on a small viewport, the text size jumps up to 16px, which is a bit large. Especially the small font size looks like a disservice to our beloved content creators :)

Proposed resolution

Settle on a better default font size. 14 or 15px seem to look better.

Remaining tasks

Write a patch

User interface changes

A more consistent font-size for body text in CK

API changes

None

CommentFileSizeAuthor
#33 font-size-chrome.PNG46.35 KBarunkumark
#33 font-size-safari.PNG36.8 KBarunkumark
#31 font-size-in-CKEditor-2350011-31.patch413 byteszealfire
#28 applying-15px.png43.58 KBzealfire
#28 font-size-of-text-in-CKEditor-2350011-28.patch3.74 KBzealfire
#15 After(15px).png56.09 KBPalashvijay4O
#15 Before(12px).png54.61 KBPalashvijay4O
#14 font-size-ckeditor-2350011-14.patch598 bytesPalashvijay4O
#12 fixed-2350011-12.patch413 bytesxlin
#11 fixed-2350011-10.patch413 bytesxlin
#9 fix-2350011-9.patch676 bytesxlin
#5 Selection_023.png84.21 KBrpayanm
#5 text-in-CKEditor-2350011-5.patch413 bytesrpayanm
#4 text-in-CKEditor-2350011-4.patch413 bytesrpayanm
#4 Selection_022.png80.31 KBrpayanm
#3 Selection_021.png82.19 KBrpayanm
#3 text-in-CKEditor-2350011-3.patch413 bytesrpayanm
ckeditor-small-font.png235.88 KByoroy
ckeditor-large-font.png224.1 KByoroy
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented
Title: Too small/large font sizes for body text in CK editor » Too small/large font sizes for body text in CKEditor

Thanks, great point :)

rpayanm’s picture

rpayanm
he/him
Primary language Spanish
CreditAttribution: rpayanm commented
Assigned: Unassigned » rpayanm

Trying...

rpayanm’s picture

rpayanm
he/him
Primary language Spanish
CreditAttribution: rpayanm commented
Status: Active » Needs review
FileSize
text-in-CKEditor-2350011-3.patch413 bytes
Selection_021.png82.19 KB

With 14px.
with 14px

rpayanm’s picture

rpayanm
he/him
Primary language Spanish
CreditAttribution: rpayanm commented
FileSize
Selection_022.png80.31 KB
text-in-CKEditor-2350011-4.patch413 bytes

With 15px.
with 15px

rpayanm’s picture

rpayanm
he/him
Primary language Spanish
CreditAttribution: rpayanm commented
FileSize
text-in-CKEditor-2350011-5.patch413 bytes
Selection_023.png84.21 KB

With 16px.
with 16px

The last submitted patch, 3: text-in-CKEditor-2350011-3.patch, failed testing.

Status: Needs review » Needs work

The last submitted patch, 5: text-in-CKEditor-2350011-5.patch, failed testing.

The last submitted patch, 4: text-in-CKEditor-2350011-4.patch, failed testing.

xlin’s picture

xlin CreditAttribution: xlin commented
Status: Needs work » Needs review
FileSize
fix-2350011-9.patch676 bytes

I updated the font-size to 14px. Please review.

Status: Needs review » Needs work

The last submitted patch, 9: fix-2350011-9.patch, failed testing.

xlin’s picture

xlin CreditAttribution: xlin commented
FileSize
fixed-2350011-10.patch413 bytes

Second try.

xlin’s picture

xlin CreditAttribution: xlin commented
Status: Needs work » Needs review
FileSize
fixed-2350011-12.patch413 bytes

Re-upload with correct comment #.

Status: Needs review » Needs work

The last submitted patch, 12: fixed-2350011-12.patch, failed testing.

Palashvijay4O’s picture

Palashvijay4O CreditAttribution: Palashvijay4O commented
Status: Needs work » Needs review
FileSize
font-size-ckeditor-2350011-14.patch598 bytes

Submitting a test patch .

Palashvijay4O’s picture

Palashvijay4O CreditAttribution: Palashvijay4O commented
Assigned: rpayanm » Palashvijay4O
FileSize
Before(12px).png54.61 KB
After(15px).png56.09 KB

Screenshots

xq1003 queued 12: fixed-2350011-12.patch for re-testing.

xq1003 queued 9: fix-2350011-9.patch for re-testing.

The last submitted patch, 9: fix-2350011-9.patch, failed testing.

rpayanm queued 5: text-in-CKEditor-2350011-5.patch for re-testing.

rpayanm queued 4: text-in-CKEditor-2350011-4.patch for re-testing.

rpayanm queued 3: text-in-CKEditor-2350011-3.patch for re-testing.

Palashvijay4O’s picture

Palashvijay4O CreditAttribution: Palashvijay4O commented

This seems little strange same patch passed on re-test .... Can anyone elaborate on this ?

rpayanm’s picture

rpayanm
he/him
Primary language Spanish
CreditAttribution: rpayanm commented
Assigned: Palashvijay4O » rpayanm

@Palashvijay4: you can't assigned the issues from other users, only you can assigned when no one has.
@Palashvijay4,@xq1003: For work an any issue check first that this is unassigned, if no two people working on the same thing, being able to work in another issue.

Greetings.

BarisW’s picture

BarisW CreditAttribution: BarisW commented
Status: Needs review » Needs work

There is a comment in the CSS stating "A font-size of 16px prevents iOS from zooming."

So just changing the font-size from 16px to 15px doesn't seem like a good idea without finding out what this comment is about. If there's a workaround, we need to apply that too and update the comment.

rpayanm’s picture

rpayanm
he/him
Primary language Spanish
CreditAttribution: rpayanm commented

@BarisW I upload 3 patches without touch that line and for large screens I changed the font-size to 14px, 15px and 16px, in the comments #3, #4, #5 respectively, you try with those?

rpayanm’s picture

rpayanm
he/him
Primary language Spanish
CreditAttribution: rpayanm commented
Assigned: rpayanm » Unassigned
Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented

Perhaps we should look into http://makc3d.wordpress.com/2014/11/08/responsive-font-size-with-ckeditor/ and adopt something like that?

(Found it via http://ckeditor.com/blog/CKEditor-Weekly-for-November-17-2014.)

zealfire’s picture

zealfire CreditAttribution: zealfire commented
Assigned: Unassigned » zealfire
Status: Needs work » Needs review
FileSize
font-size-of-text-in-CKEditor-2350011-28.patch3.74 KB
applying-15px.png43.58 KB

@wim leers and @Baris W, i think the comment which is present in css file of ckeditor with respect to zooming in iOS is related to comfortable reading size which i found at his link :http://uxcellence.com/2014/01/15/quick-fix-increase-font-size-to-16px-to... ,so there is most probably no need of any change in this section.But i have made changes in body section by changing font size of 12px to 15px.Am i going in the right direction ?

Palashvijay4O’s picture

Palashvijay4O CreditAttribution: Palashvijay4O commented

@zealfire you should reset your previous changes to the codebase and then create a patch for a new issue . Alternatively you can create different branches for different issue . Hope this helps . :)

zealfire’s picture

zealfire CreditAttribution: zealfire commented
FileSize
font-size-in-CKEditor-2350011-31.patch413 bytes

uploading new patch.@wim leers and @Baris W, i think the comment which is present in css file of ckeditor with respect to zooming in iOS is related to comfortable reading size which i found at his link :http://uxcellence.com/2014/01/15/quick-fix-increase-font-size-to-16px-to... ,so there is most probably no need of any change in this section.But i have made changes in body section by changing font size of 12px to 15px.Am i going in the right direction ?

katetak’s picture

katetak CreditAttribution: katetak commented

I tested the patch in #31 and it does change the font size in the window. It's at 15px on standard screen, and increases to 16px on smaller screen.

arunkumark’s picture

arunkumark
Location Coimbatore
CreditAttribution: arunkumark commented
Status: Needs review » Reviewed & tested by the community
FileSize
font-size-safari.PNG36.8 KB
font-size-chrome.PNG46.35 KB

Tested and Reviewed in Safari, Opera, IE 11, Chrome and Firefox on Windows.
Attached Screen shot for Safari:
font Size in Safari
Attached Screen shot for Chrome:
Font size in Chrome
Its works Fine.

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented

Nice work, I guess it should be pulling in the stylesheet from the active theme? Sounds like a different issue though.

yoroy’s picture

yoroy CreditAttribution: yoroy commented

Thanks for reviewing and screenshots, rtbc indeed.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott commented
Status: Reviewed & tested by the community » Fixed

Committed 02d58f6 and pushed to 8.0.x. Thanks!

  • alexpott committed 02d58f6 on 8.0.x 
    Issue #2350011 by rpayanm, Palashvijay4O, xq1003, zealfire, yoroy,...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.