hi @[email protected].... i've been thinking about ux in mitra lately and have some potentially good fixes to solve the missing icon problem in Tor Browser and MullvadBrowser(?) (safest mode).
-
hi @[email protected].... i've been thinking about ux in mitra lately and have some potentially good fixes to solve the missing icon problem in Tor Browser and MullvadBrowser(?) (safest mode).
i teach folk to put noscript in the toolbar so they can enable javascript on a per site basis, rather than downgrade security and allow javascript on all websites (aka "Safer" mode). using safer mode rather than safest also means that svg are not downloaded.
as a result there is no indication that icons exist in some parts of mitra. We can add glyphs as fallback tho.... as an example i have found the following 4 (out of 7) glyphs for posting toots.
Attach file html code
Public (visibility) 1F3DB
Add content warning โ 2691;
Emoji โป 263BI can find all the glyphs needed for all main functions, this is just a sample. even if for some, a couple glyphs are tofu.... thatd be better than nothing.
mitra embeds svg into the html, in this case fallback glyphs can be placed directly after the open tag of the svg. ie <svg><INSERT HERE>(...)</svg> i do think there is a more semantically correct way to do this, but i've spent too much time searching and just need to run this past you first.
maybe cc'ed folk kno how to proceed, also
are you down with something like this to ensure the ux is good for people who use tor the original way, before the browser devs tried to hide noscript away. when i talk to longtime tor enjoyers, most put noscript back in the toolbar.
thanks for your work, time and talk more soon
cc @nimda @p @walterebert
-
silverpillreplied to find you on :butterfedy1: fediverse on last edited by
@frogzone Looks like SVG
<title>
element is an equivalent of alt text in<img>
tags:https://css-tricks.com/accessible-svgs/
Have you tried adding it?
Also, I think text would be better than a glyph, from accessibility perspective
-
find you on :butterfedy1: fediversereplied to silverpill on last edited by
@silverpill @nimda @p @walterebert that's the element, title!! well found silverpill. I knew it was something eerily regular like that!
the css-tricks link wont work for me but yes, text may be better. do what you think is best, the emoji smiley is probably fine but if you prefer a line based glyph, rather than solid, theres (x263a) it means three text buttons, 1 glyph button, which will be visually more appealing than four 4 text, but its up to you.
for the "more" menu on toots i just found 22EF โฏ and it seems to look smart at font-size: 1.2em; font-weight: bold; with two & nbsp; to separate it from the Like count. again we'd get that nice result of three text buttons, 1 glyph
tell me if you want anything else explored. yesterday i updated my profile, removed that bug 2 you fixed and added a bug no.4 i think i'll do something for bloat tomorrow, if poss.
thanks all i wont tag u in followup toot unless requested.... gtg and viva :butterfedy2: fediverse
-
find you on :butterfedy1: fediversereplied to find you on :butterfedy1: fediverse on last edited by
heya @silverpill i didn't have time to explore the buttons for the individual toots yesterday, but today found these.... they look appropriate!
โคท &# x2937;
โณ x27F3;
๐ x1F592;truth be told, none, including the 22EF (โฏ) need to be bigger or bolder thats just window dressing.
so yeah i think they should work great....no need for translations either :awesome: what do u think?
viva :butterfedyC: fediverso!
-
find you on :butterfedy1: fediversereplied to find you on :butterfedy1: fediverse on last edited by
@silverpill i forgot to attach the actual example test i did....bottom of a toot looked like this after i put the gylphs in, the ONLY other thing i added was a margin-right:0.7em to the counters so the glyphs were not too close to the wrong counter
-
silverpillreplied to find you on :butterfedy1: fediverse on last edited by
@frogzone Looks good.
-
find you on :butterfedy1: fediversereplied to silverpill last edited by
@silverpill >Looks good.
sweet. have you had a chance to try it out with the <title> elements in the svg? You might be albe to style them if placed inside <p> or <span> elements but i have not tried this myself yet, in fact we might be able to set visibility:hidden on the <span> to hide the glyph and then set a backgroud image that is a png for an outer <p> element. That way you might be able to load aa different png for light and dark theme!if u want me to do a test myself first, i can probably do that.
-
silverpillreplied to find you on :butterfedy1: fediverse last edited by
@frogzone I didn't find an easy way to dynamically insert <title> tag. Maybe this can be done with an advanced svg loader.