Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add options.footnoteSymbol to API for less opinionated footnote styling #32

Closed
4 tasks done
tjex opened this issue Jun 1, 2023 · 5 comments
Closed
4 tasks done
Labels
💪 phase/solved Post is done

Comments

@tjex
Copy link

tjex commented Jun 1, 2023

Initial checklist

Problem

Currently the symbol used in mdast-util-to-hast gets rendered as an emoji arrow.

Screen Shot 2023-06-01 at 15 17 29

As discussed here, the rendering of the arrow seems to depend on the host environment. On my Astro site they get rendered as an emoji arrow as above (where I only use the default markdown packages remark-gfm and smarty-pants, but here on github, footnotes get rendered as a normal text arrow 1.

Solution

As described above, the rendering behaviour due to the host environment is inconsistent. Emojis are also a very opinionated styling. I therefore think it would be great to implement a method for setting a custom symbol in place of the text arrow. For example, simply adding a different arrow for me, maintains that arrow upon rendering.

mdast-util-to-hast/lib/footer.js line: 53

- children: [{type: 'text', value: '↩'}]
+ children: [{type: 'text', value: '⤴ '}]`
Screen Shot 2023-06-01 at 15 09 14

This could look like:

options.footerSymbol = '⤴';

Which would simply replace the arrow symbol in mdast-util-to-hast/lib/footer.js

Alternatives

Other than manually editing the mdast-util-to-hast/lib/footer.js file in node_modules, I don't think so.

Footnotes

  1. footnote

@github-actions github-actions bot added 👋 phase/new Post is being triaged automatically 🤞 phase/open Post is being triaged manually and removed 👋 phase/new Post is being triaged automatically labels Jun 1, 2023
@wooorm
Copy link
Member

wooorm commented Jun 5, 2023

Yep, will get to this in a bit. It’s already implemented in micromark-extension-gfm-footnote and markdown-rs

As discussed here, the rendering of the arrow seems to depend on the host environment

Hmm, it’s more: in the same way that the host may define which font is used for your website. You can use CSS to style your website. And you can use CSS for this too. See also https://css-tricks.com/text-that-sometimes-turns-to-emojis/. The fact that this happens is that GitHub uses the exact same character, but displays it differently from your site

@tjex
Copy link
Author

tjex commented Jun 5, 2023

excellent! and thanks for the extra info :)

@github-actions

This comment has been minimized.

@wooorm wooorm added the 💪 phase/solved Post is done label Jul 17, 2023
@github-actions github-actions bot removed the 🤞 phase/open Post is being triaged manually label Jul 17, 2023
@wooorm
Copy link
Member

wooorm commented Jul 17, 2023

Solved upstream, will be here in a bit!

@tjex
Copy link
Author

tjex commented Jul 18, 2023

legend! thanks mate :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💪 phase/solved Post is done
Development

No branches or pull requests

2 participants