Bug 30966

Summary: Pressing backspace merges normal text into header but style still looks normal
Product: WebKit Reporter: Marcos Almeida <marcosalmeida>
Component: HTML EditingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Normal CC: enrica, rniwa
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: PC   
OS: Windows XP   
URL: http://www.mozilla.org/editor/midasdemo/

Description Marcos Almeida 2009-10-30 15:18:53 PDT
1. Go to http://www.mozilla.org/editor/midasdemo/
2. Type "Foo"+<enter>+"Bar"
3. Double-click "Foo" and choose Heading 1 from the first dropdown in the second toolbar
 --> "Foo" is a header and "Bar is normal text.
     Current html is: <h1>Foo</h1><div>Bar</div>
4. Place cursor in front of "Bar" and press backspace
 --> "Bar" moves up to the same line as "Foo"; visibly both words still have the same font size and weight.
     Current html is: <h1>Foo<span class="Apple-style-span" style="font-size: medium; font-weight: normal; ">Bar</span></h1>
5. Press enter.
 --> The line is split into two and looks just like after step 3.
     Current html is: <h1>Foo</h1><h1><span class="Apple-style-span" style="font-size: medium; font-weight: normal; ">Bar</span></h1>

Visibly this looks fine, but the bad side effect is that "Bar" is inside an <h1> even though to the user it looks like normal text. I understand that "Bar" is placed inside the <h1> when you press backspace because <h1> is a block level element so you put the text inside it so that it can be on the same line. But you're changing the semantics of "Bar" -- it's now a header since it's inside the <h1>, not normal text -- and the user has no visual cue that that happened. So when they press enter and "Bar" shows up on its own line, they don't expect it to be a header. But if any application is examining the html to determine the semantics of the content, it will determine that "Bar" is a header.

A possible solution is to not put "Bar" inside the <h1> on backspace, but rather set the <h1> to display:inline to allow "Bar" to be on the same line. However, this has a side effect: after you hit enter again, the display:inline remains, making the spacing between the two lines smaller than before. Also, it might break any apps that assume that <h1> is always display:block.

Another possibility is to do what other browsers and even MSWord do: don't attempt to keep the font size and weight of "Bar" when you insert it into the <h1>. That way the user knows that "Bar" became a header, and if they press enter and don't want it to be a header any more, they will remove the formatting on it.
Comment 1 Ryosuke Niwa 2012-05-01 22:16:49 PDT
Fixed in http://trac.webkit.org/changeset/96870.