Steps to reproduce

  • Install Drupal 8
  • Configure the wysiwyg editor so you can add h4 and h5 using menu item "format"
  • Create a piece of content
  • Format something with H4 or H5
  • Save the article

What I would expect to happen
The piece of formatted text should be displayed as h4 or h5

What happened
The piece of text I had formatted was displayed unformatted.

#11 bartik-header-styles-2020081-11.patch511 bytesBrightBold
PASSED: [[SimpleTest]]: [MySQL] 64,571 pass(es).
[ View ]
#11 bartik-header-styles.png98.28 KBBrightBold
#5 Screen Shot 2013-06-27 at 14.05.22.png25.84 KBvollepeer


Status:Active» Closed (duplicate)
Issue tags:+Spark, +CKEditor in core

This is in fact the same problem: different symptom, same cause! Again, see #1936392: Configure CKEditor's "Advanced Content Filter" (ACF) to match Drupal's text filters settings :)

Status:Closed (duplicate)» Active

Can't reproduce this one though.

Say, you added the "format" dropbutton to the WYSIWYG iconbar?
And you didn't remove <h4> and <h5> from the "Limit allowed HTML tags" filter in the text format?
And you're using exactly the same WYSIWYG text format you had defined with the "format" dropbutton?
Then, how can this be?

For now, tentatively marking this one active again.

Title:Formatting not displayedH4 element not distinguishable from rest of text
Component:node system» Bartik theme
Category:bug» feature

Doh! I've just realised what the "problem" is - the H4s are showing up in the HTML code (so not really a big bug after all), but in the CSS for the H4 element it says "font-weight: inherit". When I deactivate that using the DOM inspector in Chrome, the H4s are bold - so presumably it's not a bug but a suggestion for a change in the Bartik CSS?

I've reassigned this to be a Bartik issue - I'm pretty new to all this, so let me know if that's the wrong thing to do!

new25.84 KB

Browsers will render h4 headings with the same size and style than regular text. h5 and h6 headings are even rendered smaller than regular text (see attachment). This behavior is standardized across all modern browsers.

Should we override this default behavior using CSS and e.g. make all headings bold? The usage of too much heading levels isn't accepted as a good practice either...

Okay, probably best to stick to browser standards! But the problem is that "Basic HTML" and "Restricted HTML" text formats don't allow any headings on a higher level than h4, so effectively it means that you can't have formatted headings using this filter (or at least not ones that display as you would expect). So it would appear that that's an issue with the text formats then? I'll move this issue to the filter.component module, rename etc.

Component:Bartik theme» filter.module

I just found that a similar issue has been discussed at length already, so I posted a comment on that thread:

From an accessibility point of view, the hierarchy has been important.

Particularly with comments, which is where filtered html is often used, you don't want them to have a higher ranking than the main content of the text.

Generally there's been just one H1. H2 tags are used for a lot of default content like block headers.

Thought I'd also point to the Drupal 8 Style Guide for Seven for reference. Although, this is more of a Bartik issue:

Issue tags:-Spark, -CKEditor in core

Removing tags that are now proven to be irrelevant.

Title:H4 element not distinguishable from rest of textH4 element not distinguishable from rest of text (P element)
Component:filter.module» Bartik theme
Category:feature» bug

This is not a bug/problem in filter.module. This is a matter of styling solely, hence this is a problem in the Bartik theme.

Issue summary:View changes
new98.28 KB
new511 bytes
PASSED: [[SimpleTest]]: [MySQL] 64,571 pass(es).
[ View ]

I took a look at this and was surprised to see that Bartik only explicitly declares h1 and h2. It seems to me we should not be leaving all the remaining header styles to the whim of the browser.

While @vollepeer is correct that browsers tend to render h4 at 1em, they are usually bold by default, providing the site visitor with a visual differentiation between the header and paragraph text. Because Bartik's header styles are not bold, this distinction has been removed so we need to do something else to provide the reader with a clue that this text is more important.

Here's my first pass at styling the other headers explicitly — I'm not really happy with it but I'm putting it out here for discussion. Hopefully we can figure out the right balance between retaining the Bartik aesthetic and finding a way to distinguish h4 from paragraph text.

Status:Active» Needs review