Mastodon: some UI elements change with the font 'OpenDyslexic'

[littlemeowing]

I recently changed the default font in my browser to "OpenDyslexic" version 3. More information about the font can be found here: https://gumroad.com/l/OpenDyslexic.

Since then some of the UI elements changed. The boost / awoo button is doubled everywhere and always, the reply button only sometimes. I have three accounts in the fediverse, on mastodon.social, on queer.party and on vlupine.club, I use the web-UI and it happens on all of the mentioned instances.
I attched two pictures to show this.

I use Firefox 52.8.1 (64-bit) on Debian (Stretch, I think).
It is not high priority for me personally and sadly, I cannot help to solve this code-wise if the issue got something to do with the Mastodon-code itself.

[nightpool]

the reply button doubling is intentional, it distinguishes between a
threaded reply and a reply to a base post. the reblog one is more
confusing—are there any other styles applied other then the opendyslexic
font? do you have stylish installed?

On Fri, Jun 29, 2018, 10:25 AM little meowing [e-mail]
wrote:

I recently changed the default font in my browser to "OpenDyslexic"
version 3. More information about the font can be found here:
https://gumroad.com/l/OpenDyslexic.

Since then some of the UI elements changed. The boost / awoo button is
doubled everywhere and always, the reply button only sometimes. I have
three accounts in the fediverse, on mastodon.social, on queer.party and on
vlupine.club, I use the web-UI and it happens on all of the mentioned
instances.
I attched two pictures to show this.
[image: mastodon-opendyslexic-00]
https://user-images.githubusercontent.com/26465834/42100369-4c214e3c-7bc0-11e8-82bc-2c7167eae3d6.png
[image: mastodon-opendyselxic-01]
https://user-images.githubusercontent.com/26465834/42100386-536d36c4-7bc0-11e8-8d26-2038b425daaa.png

It is not high priority for me personally and sadly, I cannot help to
solve this code-wise.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/tootsuite/mastodon/issues/7914, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAORV2ixQhjAGQs2kKS-tV2dpQoSSlhbks5uBkbqgaJpZM4U9NR8
.

[littlemeowing]

@nightpool thank you for clarifying that the reply button is intentional.
I haven't installed stylish and I'm not aware of any other styles applied.
My Firefox add-ons are AdBlock Plus, uBlock origin, Tab Counter and OverlayScrollbars. I disabled everything but Tab Counter to see if something changes - it did not change.

[mkljczk]

Waterfox 56.2.1 64-bit, Arch Linux stable here…

[ThibG]

I can't understand why that would happen, especially since the boost button does not rely on a font.

@littlemeowing are you still experiencing this issue?

[littlemeowing]

Yeah, it's still the same.

[ThibG]

Ok, I understand a bit more about this issue: the boost button is both a font-awesome icon and a SVG background. Unless the “reduce motion” setting is enabled, the text version (through font-awesome) is hidden. But both are shown when that setting is enabled.

Therefore, it is likely that @littlemeowing is using that setting, and that changing to OpenDyslexic somehow makes the background and the text version misaligned.

I guess we could just disable the SVG background if the “reduce motion” setting is set?

[trwnh]

@ThibG Better idea: remove SVG background and instead inline it with the HTML; that way it can be custom styled more easily and also not depend on font-awesome. I think there's an issue open already to use SVG elements for all the icons, and it would solve several issues with customization all at the same time.

Edit: #1469

[ThibG]

I'm not sure how they would be easier for custom-styling? But yeah, having both an SVG background icon for this is weird.

[trwnh]

Directly embedding the SVG as an HTML element means you can target the path
inside it for CSS "fill: color" rules, among other things. The trendlines
that appear in the search drawer next to hashtags can be easily themed, for
example. But you can't change the path color in a url-embedded SVG, you can
only replace the entire image. You also can't use CSS variables inside a
URL, only within the document.

On Sun, Sep 9, 2018, 5:18 AM ThibG [e-mail] wrote:

I'm not sure how they would be easier for custom-styling? But yeah, having
both an SVG background icon for this is weird.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/tootsuite/mastodon/issues/7914#issuecomment-419704904,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AKHXX15ujRED5oGiK9-VvHMt8OAk5lOGks5uZOrlgaJpZM4U9NR8
.