Using images instead of emojis?

[DecimalTurn]

It seems to me that using images instead of emojis would be better for clarity, but I wanted to confirm if that's something you'd want to add (I don't know if the choice of using emojis was for simplicity or for aesthetic reasons).

Here's a proof of concept to see how it would look only for the Word Logo: https://github.com/DecimalTurn/awesome-vba/tree/6ae545daf684f0c42ee0b2cea4b6bf603f0348c0

[sancarn]

Aesthetically it looks great. I'm not a massive fan of how much text it requires for each image though in the readme file:

<picture><source media="(prefers-color-scheme: dark)" srcset="./resources/WordLogo.png"><source media="(prefers-color-scheme: light)" srcset="./resources/WordLogo.png"><img alt="Word" title="Word" src="./resources/WordLogo.png" height="18px" align="center"></picture>

Like, markdown files are meant to be human readable, not only renderable. Images do have the benefit of being universal across different systems though...

Maybe something like this is doable?

[a_wd]: "./resources/WordLogo.png"

* ![a_wd][a_wd]

Alternatively maybe we can build the awesome list to html and hosting that on a github.io site...

[sancarn]

Did some reading, and turns out we can do this:

[pa_wd]: ./resources/word18.png "Word"

* ![pa_wd] - hello

But the image needs to be the exact correct size... I think 16 pixels high is correct? Which should look something like this:

[DecimalTurn]

That's neat indeed! I was trying to make the image unclickable, but that's a small price to pay if the goal is to keep things short. I wish there was a way to preserve a little more quality to the image as well, but it's still recognizable.

[DecimalTurn]

Also, when you start to use images with the ![ ] syntax, you have to use it everywhere otherwise the emojis and images look unaligned.

In my test (using the picture tag), it doesn't look too bad:

But this is how it looks with the ![ ] syntax:

Raw version:

[p_win]: # "Windows OS only"
[a_wd]:  # "Word"
[a_xl]:  # "Excel"
[pa_wd]: https://user-images.githubusercontent.com/31558169/226777909-a394720c-4fdb-44c6-82c2-005edc5a3e8d.png "Word"
[o_pass]: # "VBA is password protected"  

* [🖼][p_win][📊][a_xl] ![pa_wd] [🔒][o_pass] - [RibbonX](https://www.andypope.info/vba/ribboneditor_2010.htm) - AndyPope's Visual Ribbon Editor.

[sancarn]

images look unaligned

Is that not because the height of that picture is 17px rather than 16?

In fairness it might have to be 15px or something instead... I find it difficult to see in devtools

---

Ahh but i see what you mean, the picture is offset/elevated... Can we add CSS to the whole document?

Doesn't look like it actually, might be worth looking at SVGs and seeing if they also have this same issue. I imagine they do... I guess it wouldn't be the end of the world for most emoji to be converted to images... We may not be able to for the padlocks, DLL links etc. but maybe that's not a big issue...

[DecimalTurn]

Yeah, the image is aligned with the top of the row of text while the emojis are more aligned with the text. I had the same issue with the <picture> syntax as well, but apparently adding the attribute align="center" is a workaround to make the image treated more like text. Unfortunatly, that's not an option with the ![ ] syntax.

Regarding the use of CSS to fix this, it's impossible because :

Unfortunately you cannot use CSS in GitHub markdown as it is a part of the sanitization process [to remove it].

source

[DecimalTurn]

might be worth looking at SVGs

Yeah, that might be a good idea. It's also apparently possible to preserve the quality of the image if we specify the size of the image inside the svg like this :

<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" >

[DecimalTurn]

We may not be able to for the padlocks, DLL links etc. but maybe that's not a big issue...

Even if there is no svg version of those emojis, we could always find a png version and wrap it inside an svg like this:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image href="mdn_logo_only_color.png" height="200" width="200" />
</svg>

source

[sancarn]

SVGs do exist for all applications (search this site for WordLogo for instance. These are currently created as font files, however a fonts can be converted to SVGs with some converter websites. From here glyphs can be converted to paths easily. But finding the relevent font might be a pain...

---

Generated example of word:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 -2048 2048 2048">
<metadata>
Created by FontForge 20201107 at Thu Aug 19 18:12:49 2021
 By Unknown
(c) 2017 Microsoft Corporation. All Rights Reserved.
</metadata>
<!--
<defs>
<font id="FabricMDL2Assets" horiz-adv-x="2048" >
  <font-face 
    font-family="Fabric MDL2 Assets"
    font-weight="400"
    font-stretch="normal"
    units-per-em="2048"
    panose-1="5 10 1 2 1 1 1 1 1 1"
    ascent="2048"
    descent="0"
    bbox="0 0 2048 2048"
    underline-thickness="119"
    underline-position="-237"
    unicode-range="U+E782-F1EB"
  />
    <missing-glyph />
    <glyph glyph-name=".notdef" horiz-adv-x="1322" 
d="M166 0v1398h990v-1398h-990zM314 148h694v1102h-694v-1102z" />
    <glyph glyph-name="uniE782" unicode="&#xe782;" 
d="M0 1780l768 107v-735h-768v628zM1920 2048v-896h-1024v753zM896 1024h1024v-896l-1024 143v753zM0 1024h768v-735l-768 107v628z" />
    <glyph glyph-name="uniED69" unicode="&#xed69;" 
d="M1280 1984q137 0 274 -15q24 -3 69.5 -9.5t100.5 -18t112.5 -28t104.5 -39t77 -51t30 -63.5v-1472q0 -35 -30 -63.5t-77 -51t-104.5 -39t-112.5 -28t-100.5 -18.5t-69.5 -9q-137 -15 -274 -15q-138 0 -274 15q-24 2 -69.5 9t-100.5 18.5t-112.5 28t-104.5 39t-77 51
t-30 63.5v224h-427q-35 0 -60 25t-25 60v854q0 35 25 60t60 25h427v224q0 35 30 63.5t77 51t104.5 39t112.5 28t100.5 18t69.5 9.5q136 15 274 15zM1280 1856q-65 0 -145 -4.5t-162.5 -15.5t-160.5 -29.5t-138 -46.5q62 -29 139.5 -47.5t159 -29t161 -15t146.5 -4.5
t146.5 4.5t161 15t159 29t139.5 47.5q-60 28 -138 46.5t-160.5 29.5t-162.5 15.5t-145 4.5zM403 841h217l51 -153h171l-245 672h-167l-248 -672h170zM1920 309v303q-66 -29 -147.5 -48t-167.5 -30.5t-170 -16.5t-155 -5q-73 0 -145.5 4.5t-144.5 12.5q-23 -17 -51 -17h-299
v-203q29 -23 78 -41t108.5 -31t124.5 -21.5t126.5 -14t114.5 -7.5t88 -2t88 2t114.5 7.5t126.5 14t124.5 21.5t108.5 31t78 41zM1920 755v369q-66 -29 -147.5 -48t-167.5 -30.5t-170 -16.5t-155 -5q-64 0 -128 3.5t-128 9.5v-384q64 -7 128 -10t128 -3q37 0 90 2t113.5 7.5
t124.5 14t123 21.5t108.5 30t80.5 40zM1920 1267v369q-66 -29 -147.5 -48t-167.5 -30.5t-170 -16.5t-155 -5t-155 5t-170 16.5t-167.5 30.5t-147.5 48v-100h299q35 0 60 -25t25 -60v-286q64 -7 128 -10t128 -3q37 0 90 2t113.5 7.5t124.5 14t123 21.5t108 30t81 40zM442 971
l69 209l67 -209h-136z" />
    <glyph glyph-name="uniF1E5" unicode="&#xf1e5;" 
d="M1963 1920q35 0 60 -25t25 -60v-1622q0 -35 -25 -60t-60 -25h-1366q-35 0 -60 25t-25 60v299h-427q-35 0 -60 25t-25 60v854q0 35 25 60t60 25h427v299q0 35 25 60t60 25h1366zM512 915l121 -227h183l-203 330l199 324h-175l-112 -205q-2 -3 -3.5 -6.5t-3.5 -7.5
q-27 55 -55 109.5t-56 109.5h-186l194 -326l-212 -328h184zM1216 256v256h-576v-256h576zM1216 640v320h-192v-320h192zM1216 1088v320h-192v-320h192zM1216 1536v256h-576v-256h576zM1920 256v256h-576v-256h576zM1920 640v320h-576v-320h576zM1920 1088v320h-576v-320h576
zM1920 1536v256h-576v-256h576z" />
    <glyph glyph-name="uniF1E7" unicode="&#xf1e7;" 
d="M1963 1920q35 0 60 -25t25 -60v-1622q0 -35 -25 -60t-60 -25h-1366q-35 0 -60 25t-25 60v299h-427q-35 0 -60 25t-25 60v854q0 35 25 60t60 25h427v299q0 35 25 60t60 25h1366zM389 1109l242 -420h152v670h-148v-429l-233 429h-161v-670h148v420zM1920 256v256h-256v-256
h256zM1920 640v256h-256v-256h256zM1920 1024v256h-256v-256h256zM1920 1408v384h-1280v-256h299q35 0 60 -25t25 -60v-854q0 -35 -25 -60t-60 -25h-299v-256h896v1152h384z" />
    <glyph glyph-name="uniF1EB" unicode="&#xf1eb;" 
d="M1152 1920q124 0 238.5 -32t214 -90.5t181 -140t140 -181t90.5 -214t32 -238.5t-32 -238.5t-90.5 -214t-140 -181t-181 -140t-214 -90.5t-238.5 -32q-110 0 -215 26t-199.5 75.5t-176 121t-144.5 161.5h-332q-35 0 -60 25t-25 60v854q0 35 25 60t60 25h332
q63 90 144.5 161.5t176 121t199.5 75.5t215 26zM1216 1789v-701h701q-12 140 -70.5 262.5t-152 216t-216.5 152t-262 70.5zM767 1143q0 58 -19.5 99.5t-53.5 67.5t-80 38t-100 12h-271v-671h157v234h106q49 0 95.5 14.5t83.5 42t59.5 68.5t22.5 95zM1152 256q100 0 193 24.5
t175.5 70t151.5 109t121 142t84 169.5t40 190h-828v828q-148 -12 -279 -77.5t-230 -175.5h359q35 0 60 -25t25 -60v-854q0 -35 -25 -60t-60 -25h-359q55 -61 120.5 -108.5t138.5 -80.5t152 -50t161 -17zM496 1229q49 0 78 -19.5t29 -71.5q0 -23 -10.5 -37.5t-26.5 -23.5
t-36 -12.5t-38 -3.5h-92v168h96z" />
    <glyph glyph-name="uniF1E9" unicode="&#xf1e9;" 
d="M672 1021q0 -39 -9 -74.5t-28 -63.5t-50 -44.5t-74 -16.5q-42 0 -72 17.5t-49 46t-28 64.5t-9 73q0 38 9 74.5t28.5 65t50.5 46t74 17.5q44 0 74 -18t48.5 -47t26.5 -65.5t8 -74.5zM2048 1024v-800q0 -40 -28 -68t-68 -28h-1344q-40 0 -68 28t-28 68v288h-427
q-35 0 -60 25t-25 60v854q0 35 25 60t60 25h555v294q0 38 26 64t64 26h1100q38 0 64 -26t26 -64v-38v-670l106 -61h1q9 -6 15 -16t6 -21zM1536 1728v-256h256v256h-256zM1536 1344v-256h256v256h-256zM1536 960v-156l260 156h-260zM1088 1728v-256h320v256h-320zM1088 1344
v-256h320v256h-320zM1088 960v-173l206 -128l114 68v233h-320zM768 1728v-192h171q5 0 10.5 -1t10.5 -3v196h-192zM510 684q77 0 137 26.5t101 73t62.5 109.5t21.5 137q0 71 -21 132t-61 106t-98 70.5t-132 25.5q-79 0 -140 -25.5t-103 -72t-63.5 -110.5t-21.5 -140
q0 -72 22 -133t63 -105t100 -69t133 -25zM640 256h1057l-673 420v-79q0 -35 -25 -60t-60 -25h-299v-256zM1920 267v618l-504 -302z" />
    <glyph glyph-name="uniF1E3" unicode="&#xf1e3;" 
d="M1963 1920q35 0 60 -25t25 -60v-1622q0 -35 -25 -60t-60 -25h-1366q-35 0 -60 25t-25 60v299h-427q-35 0 -60 25t-25 60v854q0 35 25 60t60 25h427v299q0 35 25 60t60 25h1366zM515 1092l123 -404h140l134 672h-141l-80 -397l-113 384h-119l-120 -386l-80 399h-147
l134 -672h140zM1920 256v256h-1280v-256h1280zM1920 640v320h-896v-320h896zM1920 1088v320h-896v-320h896zM1920 1536v256h-1280v-256h1280z" />
  </font>
</defs>
-->
    <g transform="scale(1,-1)" bbox="0 0 2048 2048">
        <path glyph-name="uniF1E3" unicode="&#xf1e3;" 
d="M1963 1920q35 0 60 -25t25 -60v-1622q0 -35 -25 -60t-60 -25h-1366q-35 0 -60 25t-25 60v299h-427q-35 0 -60 25t-25 60v854q0 35 25 60t60 25h427v299q0 35 25 60t60 25h1366zM515 1092l123 -404h140l134 672h-141l-80 -397l-113 384h-119l-120 -386l-80 399h-147
l134 -672h140zM1920 256v256h-1280v-256h1280zM1920 640v320h-896v-320h896zM1920 1088v320h-896v-320h896zM1920 1536v256h-1280v-256h1280z" />
    </g>
</svg>

Not sure how to resize, SVGs are a mystery to me... xD

[DecimalTurn]

Not sure how to resize, SVGs are a mystery to me... xD

They are a mystery for me as well 😅, but I'm sure we'll figure this out.

Regarding the SVG version of the Word logo, I think we can use the more colorful version here. That site also has pretty much all the Office applications logos.

And the key to make the size 16px is to change : <svg version="1.1" to <svg height="16" version="1.1"

---

Working example: https://github.com/DecimalTurn/awesome-vba/tree/1a4c9410facc55d0d8132ee5f5fb19de1842c33b

[DecimalTurn]

And we could even prevent the image from linking anywhere by wrapping ![pa_wd] like this: [![pa_wd]](#-)

Basically, we are providing a link to an anchor on the page that doesn't exist, so the browser stays on the page and doesn't scroll anywhere (tested on Chrome and Firefox). See Related SO answer.

[sancarn]

Looks great, additionally an SVG for Mac/Windows would be helpful. Not sure what we use for OS agnostic though.

[DecimalTurn]

The 👑 is fine IMO. However, we could go with something like this if we want to be audacious:

[sancarn]

Lol, yeah, let's stick with the crown 👍

[DecimalTurn]

Regarding the height of the images, 16px is OK on Desktop, but it looks small on mobile (see image below). I propose to use 18px instead so it looks better on both devices.