Opened 8 years ago

Last modified 2 years ago

#8118 confirmed Bug

[FF] Strikethrough style works incorrectly for bigger fonts

Reported by: dariusz.czumaj Owned by:
Priority: Normal Milestone:
Component: Core : Styles Version: 3.0
Keywords: IBM Cc: monahant@…, satya_minnekanti@…

Description

Horizontal line that should be in the middle of text is at the bottom and looks like underline instead of strikethrough.

Way to reproduce:

  1. input some text
  2. change the font size of provided text to 72
  3. choose 'strikethrough' option from toolbar

Change History (7)

comment:1 Changed 8 years ago by Jakub Ś

Keywords: strikethrough removed
Status: newconfirmed
Version: 3.6.13.0

This is the code produced by CKEditor.

	<strike>
		<span style="font-size:72px;">
			This is some <strong>sample text</strong>. 
			You are using <a href="http://ckeditor.com/" data-cke-saved-href="http://ckeditor.com/">CKEditor</a>.
		</span>
	</strike>

This is the code produced by CKEditor in XHTML sample (more or less – I have replaced classes with styles)

<span style="text-decoration: line-through;">
	<span style="font-size:500%;">
		This is some <span class="Bold">sample text</span>. You are using <a href="http://ckeditor.com/" data-cke-saved-href="http://ckeditor.com/">CKEditor</a>.
	</span>
</span>

If you paste the above code into HTML page and open in a Firefox or Opera browser than you will see that effect is the same as in CKEditor – line at the bottom of the text.
This is how those two browsers see it.



The only question from me would be – is it possible to change the code produced by CKEditor from the above to the code presented below:

<span style="text-decoration: line-through; font-size:500%;">
	This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/" data-cke-saved-href="http://ckeditor.com/">CKEditor</a>.
</span>

This code displays strike-through line in the middle of the text in every browser.

Reproducible in Firefox and Opera from CKEditor 3.0.

comment:2 Changed 7 years ago by Teresa Monahan

Cc: monahant@… added
Keywords: IBM added

Note: This only occurs if you change the font size before applying the strike through. If you apply strike through and then change the font size this does not happen because the strike tag is included inside the span tag:

<span style="font-size:72px;"><strike>Sample text</strike></span>

comment:3 Changed 7 years ago by Satya Minnekanti

Cc: satya_minnekanti@… added

Adding myself to cc

comment:4 Changed 5 years ago by Piotrek Koszuliński

Summary: Strikethrough style works incorrectly for bigger fonts[FF] Strikethrough style works incorrectly for bigger fonts

comment:5 in reply to:  2 Changed 3 years ago by Marek Lewandowski

Replying to tmonahan:

Note: This only occurs if you change the font size before applying the strike through. If you apply strike through and then change the font size this does not happen because the strike tag is included inside the span tag:

AFAICS you can repro this issue in both cases, so the order does not matter.

The thing is that all browsers except FF will adjust strike through as the font size changes. It all happens behind the scenes.

comment:6 Changed 2 years ago by Jakub Ś

@m.lewandowski from what I have checked @tmonahan might be right. When you use below code in contenteditable element, first two will display nicely, the other two with the strike line at the bottom of the text

//work
<p><span style="font-size:72px;"><strike>Sample text</strike></span></p>
<p>
<span style="text-decoration: line-through;font-size:500%;">
	Sample text
</span>
</p>

//don't work
<p><strike><span style="font-size:72px;">Sample text</span></strike></p>
<p>
<span style="text-decoration: line-through;">
	<span style="font-size:500%;">
		<span class="Bold">Sample text</span>
	</span>
</span>
</p>

If we could put strike inside the font-size span or we could put all styles into one span, then it would work.

comment:7 Changed 2 years ago by Jakub Ś

#14920 was marked as duplicate.

#7788 is related to this one.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy