How do I use Unicode to line up latin chord names over right-to-left text?

I would like to display some chords over some lyrics in Arabic. In English, I am using a commonly-used system of using a monospaced font, and using spaces to line up the chords, like this:

 G    C      D
 From all my heart

In Arabic, there are difficulties doing this, because the Arabic is right-to-left, but the chords are left-to-right. This is the result that I'm looking for, in an image:

What's more, I would like the user to be able to type out the chords and lyrics in logical order. The user should type the G first, followed by the C, then by the D. I'm OK with using special Unicode characters, but not with changing logical order.

I've tried this:

<div dir="rtl" style="font-family: monospace">
  G
  C
  D
  <br>
من كل قلبي  
</div>

(I've taken advantage of HTML treating newlines as a space in this example, to make it obvious in what order the chords are.)

As you can see when you run the snippet, the chords, typed in logical order, show up in the wrong order. The Unicode algorithm recognises that these are left-to-right words separated by spaces, and so displays them left-to-right, even though the overall context is right-to-left. Is there any way I can turn off this behaviour in Unicode?

Solution

Let's try using U+202B RIGHT-TO-LEFT EMBEDDING, terminating the block using U+202C POP DIRECTIONAL FORMATTING:

<div dir="rtl" style="font-family: monospace">
  &#x202B;
  G
  C
  D
  &#x202C;
  <br>
من كل قلبي  
</div>

Nope, this doesn't work. U+202B only affects weak characters, characters like ! and . that don't have inherit directionality. The characters G, C and D have inherit left-to-right directionality, and so they aren't affected.

OK, then, let's try using U+202E RIGHT-TO-LEFT OVERRIDE instead, terminating the block using U+202C again:

<div dir="rtl" style="font-family: monospace">
  &#x202E;
  G
  C
  D
  &#x202C;
  <br>
من كل قلبي  
</div>

Woohoo! This at last works, giving a result like the one in the image of the question. Unfortunately, it doesn't quite work, as it forces characters within the same word to go right-to-left, which is a problem for minor chords:

<div dir="rtl" style="font-family: monospace">
  &#x202E;
  Gm
  Cm
  Dm
  &#x202C;
  <br>
من كل قلبي  
</div>

To get around this, you need to use U+202D LEFT-TO-RIGHT OVERRIDE, in addition, ending up with code like this:

<div dir="rtl" style="font-family: monospace">
  &#x202E;
  &#x202D;Gm&#x202C;
  &#x202D;Cm&#x202C;
  &#x202D;Dm&#x202C;
  &#x202C;
  <br>
من كل قلبي  
</div>