Assumption

While I���m talking about the SVGs on The Session, I thought I���d share something else related to the rendering of the sheet music.

Like I said, I use the brilliant abcjs JavaScript library. It converts ABC notation into sheet music on the fly, which still blows my mind.

If you view source on the rendered SVG, you���ll see that the path and rect elements have been hard-coded with a colour value of #000000. That makes sense. You���d want to display sheet music on a light background, probably white. So it seems like a safe assumption.

Ah, but when it comes to front-end development, assumptions are like little hidden bombs just waiting to go off!

I got an email the other day:

Hi Jeremy,

I have vision problems, so I need to use high-contrast mode (using Windows 11). In high-contrast mode, the sheet-music view is just black!

Doh! All my CSS adapts just fine to high-contrast mode, but those hardcoded hex values in the SVG aren���t going to be affected by high-contrtast mode.

Stepping back, the underlying problem was that I didn���t have a full separation of concerns. Most of my styling information was in my CSS, but not all. Those hex values in the SVG should really be encoded in my style sheet.

I couldn���t remove the hardcoded hex values���not without messing around with JavaScript beyond my comprehension���so I made the fix in CSS:

[fill="#000000"] { fill: currentColor;}[stroke="#000000"] { stroke: currentColor;}

That seemed to do the trick. I wrote back to the person who had emailed me, and they were pleased as punch:

Well done, Thanks!�� The staff, dots, etc. all appear as white on a black background.�� When I click “Print”, it looks like it still comes out black on a white background, as expected.

I���m very grateful that they brought the issue to my attention. If they hadn���t, that assumption would still be lying in wait, preparing to ambush someone else.