7

In 2016, ABCjs was enabled on our site by staff member Adam Lear, see ABCjs integration now available. This allows short pieces of code in ABC notation (a relatively friendly syntax) to render simple staff notation on questions and answers.

For example, this code:

X: 1
T: Zelda's Lullaby
C: Koji Kondo
Q: "Tranquillo" 1/4=104
K: Gmaj
M: 3/4
L: 1/4
V: "Ocarina"
%%MIDI program 79
"C" !p!B2 d | "D7/C" A2 G/A/ | "C" B2 d | "D7/C" A3 |
"Bm7" B2 d | "C#dim7/Bb" a2 g | "Am7" d2 c/B/ |"D7" A3 ||

will render as:

X: 1
T: Zelda's Lullaby
C: Koji Kondo
Q: "Tranquillo" 1/4=104
K: Gmaj
M: 3/4
L: 1/4
V: "Ocarina"
%%MIDI program 79
"C" !p!B2 d | "D7/C" A2 G/A/ | "C" B2 d | "D7/C" A3 |
"Bm7" B2 d | "C#dim7/Bb" a2 g | "Am7" d2 c/B/ |"D7" A3 ||

This is a fantastic feature of M:P&T, but it’s not utilised very often — mainly because there are a few serious problems with it.

1. The editor doesn’t render ABCjs in the preview

When drafting a question or answer, the editor doesn’t render the code. If you want to include some ABC on a post (and know what it’s going to look like before posting), then you’ll have to test it out someplace else. Testing can be done with an external editor (either online such as with the abcjs quick editor, or offline such as with EasyABC. In fact, there are over 100 different software packages for editing ABC notation across various platforms).

But frustratingly, these editors aren’t necessarily running the same versions of ABC/ABC2; some commands that work with an external editor will have a different output on our site. The difference can be anywhere from a subtle change of font, to not woking at all, or doing something unexpected.

The safer option is to use our sandbox. This shows exactly what output you’re going to get, but because the editor doesn’t render ABCjs in the preview, it still requires the tedious and guess-and-check method; sometimes it can take dozens of micro-edits to fix a problem. Often, the best thing to do is to write the code with an external editor first, and then try it in the sandbox (before making the real post). This can be a big hassle.


This issue was first mentioned within in the first few comments on of the original 2016 announcement:

Should code be automatically interpreted on the fly in the answer preview on a post? (It doesn't appear to be: is that expected?)

— Andrew Leach

@AndrewLeach […] no, it's not supposed to work live in the preview. It's also an unfortunate limitation at the moment.

— Adam Lear (Staff)

and it’s still a problem, as seen here:

it's also annoying that you can't see the result until you post (unless you use sandbox that I can never find), and that the syntax seems not to be 100% compatible with official ABCjs (which makes examples tested in their sandbox not work)

— user1079505

or in this comment here:

Having issues with ABCjs notation... sorry the rendering is not correct. I can’t figure out what it’s missing and it doesn’t help that I can’t preview the rendered markdown before posting :\

— Patrick Roberts

2. Sometimes ABCjs doesn’t render properly at all

Even when the ABC code is bug free, a caching issue frequently causes a different problem. Far too many times, I’ve seen posts using ABC rendering something that looks like this:

ABC code failing to render correctly, showing somewhat garbled output.

To those who haven’t seen this before, it isn’t even clear what has gone wrong here (it doesn’t look like an error message) — Is it just a weird piece of music? — Is there an bug in the code? — No, this is a caching issue.

Posts using ABC often get comments just trying to understand what the above is:

For some reason when people add music notation in this way I sometimes get a very random series of beamed 8th notes followed by a dotted half which has nothing to do with the question. Any thoughts?

— John Belzaguy

or this other comment (on a completely different post):

I'm having trouble getting it to render properly. I get some mess with mordents & missing the triplets.

— Michael Seifert

or this one:

The ABC notation examples don’t show properly for me :(

— user1079505


When I (or others who’ve dealt with this before) see comments like this, I’ll often suggest:

A hard refresh on the browser. If you’re using Google Chrome…

  • …on a Windows computer it’s: Ctrl+F5.
  • …on a Mac it’s: ⌘ Command+⇧ Shift+R.

Sometimes this works, but not always:

@musicamante yes, this is what I see, and I'm familiar with this weird behavior, but while normally refreshing the browser helps, this time it doesn't. Neither does incognito mode help.

— user1079505


One of the answers to the 2016 announcement even mentions this issue:

Of course, it's a bit of a pity that you need to refresh to see the rendered output. With MathJax on the science SE sites, the quick feedback is really nice (especially for newbies), and for ABC this would be at least as helpful. I think it ought to be possible too, at least drawthedots.com renders immediately.

— leftaroundabout

I’ll see what I can do about not needing a refresh to edit... not sure how involved that’s gonna be, though, so no promises there.

— Adam Lear (Staff)

Bug reports

In the meantime, there have already been two or three bug reports about the caching problem:

The first of these was several years ago, but neither have yet had a response for staff.


I’ve tended to avoid using ABC on this site, because most of the times I have tired to use it, it turned out to be difficult to get it to display a few simple measures that I had working just fine in an external editor. And, I want everyone to be able to read my posts (without having to know that they might need to hard refresh their browser.

Request

Can the fine tuning of ABCjs integration on our site please be revisited?

I request that:

  1. The editor be made to render ABCjs in the preview.
  2. The caching issue be fixed.

ABC/ABCjs is a great piece of software, and it’s so close to integrating beautifully with the Music: Practice & Theory site, it just needs these issues addressed.

Clear notation greatly enhance SE posts when it works, such as MathJax on the various maths/science sites, or Portable Game Notation on the chess site, but it causes headaches when it doesn’t.

6
  • 5
    When I first joined the site, I used ABC at every opportunity. However, for some time now, I now don't use it at all and have even begun replacing it in old posts of mine with screenshots from MuseScore. I gave up on ABC when it became clear that it was not being maintained, and the display problems made it effectively unusable to many, if not most, posters/readers/viewers. I would love to see it working again and would start using it near immediately.
    – Aaron
    Commented Nov 23, 2023 at 7:40
  • 2
    At least browsers should show some kind of error message instead of the weird mordent-mess.
    – PiedPiper
    Commented Nov 23, 2023 at 10:29
  • 1
    To be clear, is the caching issue ABCjs's problem, or SE's? Commented Nov 27, 2023 at 14:55
  • Related: jTab needs to render in Markdown preview Commented Nov 29, 2023 at 9:21
  • 1
    Present ABC implementation in MPT SE creates more problems than it solves. I'm not convinced to use it, neither I can't recommend anyone to use it. I would love it worked as well as MathJax. Commented Dec 11, 2023 at 10:24
  • One requirement for consistency can be by using a JS library that conform to the latest standard. Commented Mar 2 at 23:43

1 Answer 1

2

I will be marking this one as status deferred. After some investigation, it looks like the preview portion was never actually implemented. It also looks like that piece might be a bit complex to sort out.

We can reproduce the caching issue, but it's not entirely clear why it's happening. So, a much more detailed investigation is required. Unfortunately, it doesn't look like we will have the time to address this immediately. It's been placed on the backlog and will be addressed in 6-8 weeks.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .