citation not formated at all (blockquote)( oder so ähnlich())

[ksuess]

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
The <blockquote> [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element indicates that the enclosed text is an extended quotation.

go to https://classic.demo.plone.org/en

• create page
• mark text as blockquote
• sve page
• see that marked text passage looks like normal paragraph and is not formatted, not indented, not marked with quotation markes, nothing.

I expect blockquote nodes to be formatted somehow. there may be opinions on how to format a citation/blockquote, but it should not be ignored completely IMHO.

[ksuess]

[EDIT] there may be opinions on how to format a citation/blockquote, but it should not be ignored completely IMHO.

[stevepiercy]

I'd suggest pulling the style from Bootstrap for blockquote: https://getbootstrap.com/docs/5.3/content/typography/#blockquotes.

@ksuess thanks for reporting. If you don't have time to work on it, perhaps someone from the @plone/classicui-team can add information here about which package needs to be updated and how, to help this issue move forward.

[yurj]

something like

blockquote {
    @extend .blockquote;
}

?

[petschki]

hm ... .blockquote only raises the font-size to 1.25rem and does a margin-bottom ... thats not really obvious as a blocked quote to me. We could implement something more barcelonetish here like this:

blockquote {
    @extend .blockquote;  // font-size and margin
    background: var(--bs-light-bg-subtle);
    border-left: var(--bs-border-style) 5px var(--bs-border-color);
    color: var(--bs-light-text-emphasis);
    padding: $spacer;
}

leads to something like this:

note that using the variables ensures the correct coloring for light and dark mode (see https://classic.demo.plone.org/@@test-rendering-cheatsheet)

EDIT: you can simulate that with this snippet in the demo page:

<blockquote class="blockquote border-start border-5 p-3 bg-light-subtle text-light-emphasis">
<p>Bearbeiten Sie diese Seite und testen Sie Plone jetzt!</p>
</blockquote>
<blockquote class="blockquote border-start border-5 p-3 bg-light-subtle text-light-emphasis" data-bs-theme="dark">
<p>Bearbeiten Sie diese Seite und testen Sie Plone jetzt!</p>
</blockquote>

[yurj]

Great to see the comeback of the callout in Plone. I like it. Dark mode support is marvellous.

[ksuess]

Well, no. According MDN: The blockquote HTML element indicates that the enclosed text is an extended quotation.
So it should be enclosed in quotation marks. I don't see a reason to give it a left border.

[stevepiercy]

I agree with @ksuess about the display. I might also want to include a <cite> in there, too.

However, I am hesitant to include quotation marks, as there are different kinds of quotation marks depending on the language.

References:

• https://getbootstrap.com/docs/5.3/content/typography/#naming-a-source
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
• https://op.europa.eu/en/web/eu-vocabularies/formex/physical-specifications/character-encoding/use-of-quotation-marks-in-the-different-languages

[yurj]

So it should be enclosed in quotation marks.

https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element

Where do you read it?

[ksuess]

Following this conversation, I think the reason why blockquote in Plone is not formatted, is that different countries and languages have different rules or different common ways to handle.

• the indentation is handled differently in different countries. I would prefer an indentation per default.
• the quotation marks are different in different languages. Even in swiss german and german german they are different.

My CSS for swiss german will look like this:

blockquote {
  margin: 0 0 0 2em;
  font-size: 1.2em;
}

blockquote p:first-child::before {
  content: '\00AB';
}

blockquote p:last-child::after {
  content: '\00BB';
}

[ksuess]

I might also want to include a <cite> in there, too.

Yes, a <cite> should be included, also in my opinion. Even MDN recommends this. But TinyMCE (Plone set of TinyMCE) does not support it. It does not prevent a <cite>, but there is not editor tool/button/whatever for it.

[petschki]

OK I get the point of blockquote (so lets keep my example in mind for a .callout)

I suggest to implement the quotes as variables in barceloneta, so one can change this in his project:

:root {
    --plone-blockquote-quote-before: "\00AB";
    --plone-blockquote-quote-after: "\00BB";
    --plone-blockquote-margin-start: 2rem;
}

and use it in barceloneta like

blockquote {
    font-size: calc(var(--bs-body-font-size) * 1.2);
    margin-left: var(--plone-blockquote-margin-start);

    p {
        &:first-child::before {
            content: var(--plone-blockquote-quote-before);
        }
        &:last-child::after {
            content: var(--plone-blockquote-quote-after);
        }
    }
}

Nice to know: since css-nesting (https://caniuse.com/css-nesting) modern browsers would compile the notation above without the need of scss compiling.

[petschki]

two solutions for <cite>:

• update the format config in tinymce controlpanel like described here: https://www.tiny.cloud/blog/blockquote-css-and-styling-in-tinymce/
• implement a tinymce template for the template plugin.

[ksuess]

I really appreciate the the time you are investing, @petschki. I think this is an enhancement to the current situation, even if for a project, the theme variables need to be set according language and country. And for a multilingual site there are more CSS rules to be added.
Ping me if I can do the documentation or review the documentation of these settings. I will not open a PR, because my site is unfortunatly Plone 5.2 and will stay there.

[petschki]

IIRC those format configs should also be valid for tinymce in Plone 5 (what version is used there OOTB?)