Twenty Nineteen: Dropcap appears higher than expected in Firefox

[kjellr]

As noted by @josephdickson, Firefox renders the dropcap text roughly 0.2em higher than in Chromium:

@josephdickson proposed a possible solution:

With a little help from @electmikemann ( via Twitter) I found a solution that I'd like to propose for a future update.

The @-moz prefix targets Firefox and is ignored by other browsers. I've tested it via the Customizer's Additional CSS box. Anyone can do the same for a quick fix.

@-moz-document url-prefix() {
	.entry .entry-content .has-drop-cap:not(:focus)::first-letter {
  	margin-top: 0.2em;
	}
}

---

This issue was migrated over from Twenty Nineteen's GitHub repository:

​https://github.com/WordPress/twentynineteen/issues/749

[joseph.dickson]

@kjellr Thanks for migrating this request.

[maxpertici]

Diff fix with hack @ -moz-document url-prefix ()

[maxpertici]

I propose this patch on the basis of the hack proposed on this ticket. This refers to the scss style-editor and _blocks files and the generated css files.

[ianbelanger]

Hi @maxpertici,

Thanks for your patch. It does seem to fix the issue in Firefox, but I noticed that there is a change to the package.json file in your diff. Please remove this change and resubmit the patch.

[maxpertici]

Same patch without package.json modification

[maxpertici]

Hi @ianbelanger,

I hope this one will be better.
Sorry for the setback. Obviously a change on the grunt config.

[ianbelanger]

No problem, thanks for updating your patch.

[samful]

I tested this issue on the latest Linux (Fedora) Firefox and Chromium and this fix works well. I hope a commit can be made soon :)

[ianbelanger]

Updated patch that uses proper selectors

[ianbelanger]

The last patch no longer worked for me, it would not apply anymore. So I have updated the patch. @samful would you mind testing it out. Works good for me in chrome and firefox. Thanks

[samful]

That patch is much tidier @ianbelanger. It all seems to work for me, I'll add a screen-shot below of before and after:

[ianbelanger]

Reviewing for commit.

[ianbelanger]

In 48047:

Bundled Themes: Twenty Nineteen dropcap appears higher than expected in Firefox.

Fixes the issue by adding moz specific top margin for the dropcap.

Props kjellr, joseph.dickson, maxpertici, samful.
Fixes #45876.

[ianbelanger]

Reopening for backport.

[desrosj]

With 5.5 just under 5 weeks away, there is no 5.4.3 planned. Moving back to the 5.5 milestone.