BUG: Quote marks in Dropcaps

[designerbrent]

Text that starts with " or other quote marks has that mark put in the dropcap.

[davideleuterius]

@designerbrent Is this only happening within the WP context? It looks like the dropcap is being set by a data attribute. If it is being set manually, then the quote could come first and then the actual letter could be set:

"<span class="o-dropcap u-theme--background-color--base" data-letter="L"></span>

But if this is being set programmatically from WP then I'll have to look at how that is being set.

[brentawilson]

@davideleuterius @designerbrent Any update on fixing this bug?

[davideleuterius]

@brentawilson
Are you using WordPress? Or just the ALPS CSS?

[brentawilson]

@davideleuterius WordPress

[davideleuterius]

What should happen to the opening quote mark when we fix this to show the first actual letter? @designerbrent

[designerbrent]

Drop it.

…

On Jun 15, 2020, at 18:28, David Eleuterius ***@***.***> wrote:  What should happen to the opening quote mark when we fix this to show the first actual letter? @designerbrent — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[davideleuterius]

@designerbrent @brentawilson
It seems this isn't a bug. This is the actual behavior / consequence of using the CSS pseudo-element ::first-letter:

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

Punctuation that precedes or immediately follows the first letter is included in the match.

So the options are:

• stop using an opening quote when selecting the Drop Cap option on paragraphs, or
• either use PHP or JavaScript to check for the drop cap option and then remove the opening quote on it.

More than likely the best option is the second one, so unless directed otherwise, I will look into this. I am leaning more towards JavaScript because should the user turn off the drop cap from the paragraph, the opening quote would still be there, but if removed via PHP, it would be dropped from the DB so if the drop cap is deactivated, the opening quote would not be restored.

Let me know what you think.

[davideleuterius]

@designerbrent
I went ahead and created a small JS patch for this in the ALPS WP repo:
adventistchurch/alps-wordpress#489

My thinking on this is that this is a display issue only, and this only affects display, not the content within the DB itself. This also handles multiple drop caps on the same page.

[designerbrent]

@davideleuterius To clarify then, are you saying that ALPS only uses ::first-letter to do this? I thought that is some JS that applies this and wraps the span around the first letter.

When I put a " (quote) at the start of a paragraph in ALPS core, not Wordpress, it applies this to the quote mark. That's why I'm not sure about adventistchurch/alps-wordpress#489 as it is just a bandaid down the line.

[davideleuterius]

In ALPS WP, it is just using the .has-drop-cap class assigned to the paragraph when someone selects that option from the block editor, and ::first-letter is applied to it through the style for that class.

In ALPS core, a js script is looking for the .has-dropcap class, and then finding the first p tag within that selector, and gets the first character. It then creates a data attribute of data-letter that it then sets on an injected span tag ( <span class="o-dropcap u-theme--background-color--base"></span> ) that replaces the first character to create the drop cap.

Then in the CSS, the letter is put back in to the span by setting it as content by reading that data-letter attribute:

.o-dropcap &::before { content: attr(data-letter);

So it seems there is different methods here for WP and ALPS core.

[designerbrent]

So it seems there is a little confusion. On ALPS for Wordpress, there are two ways to do a dropcap:

1. ALPS method
2. Wordpress method

Currently, we don't do anything with the Wordpress dropcap. The styling comes from Wordpress. We do have the ALPS version, complete with a checkbox to disable it.

[davideleuterius]

Yes, that definitely explains it. Sorry for not understanding how that was set up. I think what I did for WP just needs to be ported into ALPS core and then removed from the WP part, because I think this is done the same exact way. Again sorry for the confusion on this!