search

syntax-tree / mdast-util-to-hast

utility to transform mdast to hast
https://unifiedjs.com
MIT License
103 stars 43 forks source link

Is there any way to change the footnote back-reference character? #69

Closed garyo closed 1 year ago

garyo commented 1 year ago

Initial checklist

Problem

In my Chrome browser, the character "↩" renders as a sort of emoji -- a 3d blue square with the "back" arrow in it. This looks out of place, especially in dark mode. I see this character is hard-coded in footer.js in the footer() function.

It would be nice for a user to be able to change that to something that looks more in line with the rest of the text. In my case I'd probably use "⮐" or similar.

Solution

Perhaps add an option to allow users to select the desired character.

Alternatives

Add a more general table of substitutions or callbacks for various elements, but that seems like overkill.

wooorm commented 1 year ago

So are you using an AST, or are you compiling straight to HTML (as you asked twice: https://github.com/micromark/micromark-extension-gfm-footnote/issues/2).

What CSS, specifically font-family, is applied to your website? Please provide extra information. Your system. What versions you are using. What packages, etc

garyo commented 1 year ago

Sorry for asking twice; I have both modules in my Nuxt project but couldn't figure out which one was generating this character. The way I found it was just to grep for that character in my node_modules folder.

The page in question is live at https://www.oberbrunner.com/articles/js-looping The source is at https://github.com/garyo/oberbrunner-website

The font-family is ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; (I think this comes from TailwindCSS.)

I am on MacOS 13.1, Chrome 109. The app is statically generated Nuxt 3 (Vue 3), with NuxtContent, content-driven mode, tailwindcss, tailwindcss/typograpy and rehype/remark for math.

But just to be clear, at least on my Mac, even here on github (in Chrome) that character "↩" renders like this:

image

so I don't think it's specific to my site setup. It renders the same in TextEdit so it's not just Chrome.

My package.json has these dependencies:

    "@heroicons/vue": "^2.0.13",
    "@nuxt/content": "^2.3.0",
    "@nuxt/image-edge": "1.0.0-27840416.dc1ed65",
    "@nuxtjs/color-mode": "^3.2.0",
    "@nuxtjs/tailwindcss": "^6.2.0",
    "@tailwindcss/typography": "^0.5.9",
    "nuxt": "npm:nuxt3@latest"
    "@tailwindcss/line-clamp": "^0.4.2",
    "nuxt-icon": "^0.2.6",
    "rehype-katex": "^6.0.2",
    "remark-math": "^5.1.1",

Hope that's helpful!

wooorm commented 1 year ago

But just to be clear, at least on my Mac, even here on github (in Chrome) that character "↩" renders like this:

This is because GH actually detects it as an emoji, and applies CSS to it to force it as an emoji!

If you inspect that in devtools, you can see that they wrap it in a custom element (which doesn’t do much normally), but it gets a font-family of "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", without it the normal text renders!

The font-family is ui-sans-serif,syst…

Perhaps you could check whether you can change that. At least when you set it to monospace, it should be plain text instead of emoji (right?).

wooorm commented 1 year ago
garyo commented 1 year ago

Thanks for the hints! By applying the following CSS, I have it looking better now:

/* Footnote back-references look odd on Chrome on Mac when using the
default tailwindcss fonts */
.footnotes a[data-footnote-backref] {
  font-family: initial;
  font-size: 0.8rem;
  text-decoration: none;
}

Now it looks OK in both light and dark mode.

wooorm commented 1 year ago

OK, cool that that works for you! Closing for now.

github-actions[bot] commented 1 year ago

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.