Flipperboard for Cryptographic Titles

I remember some years ago waiting for a train to Reading in a cold London Paddington railway station and every few minutes a noisy “flipperboard” would announce a train going to some more exotic location like Clapham Junction or Weston-super-Mare.

I thought this would be a good way of creating cryptographic titles, similar to the Text Slider for Cryptographic Titles I posted here:

The HTML file is parameterised so you can easily tailor it to your requiremets without needing any coding knowledge. Just remove the “.txt” suffix and run it in a browser.

Just run it as a “Browser Source” in OBS Studio, recording the animation and then open this clip in Shotcut.

Or you could run it in a browser window and use screen-recording software, like Sharex, to record it instead of OBS Studio.

Flipperboard.html.txt (15.8 KB)

Improved version:

Flipperboard_MkII.html.txt (20.7 KB)



Oh Oh Oh! This is very nice! They also had these flipper boards in airports. When often saw those in old James Bond movies.

Thanks Elusien. Another great addition to your box of treasures :slight_smile: (Or bag of presents :santa:)

One possible bug: Changing the value of --text_color doesn’t works. No matter what value I put there, the text stays black.

EDIT: Temporary workaround: Insert the text color at the end of:
html, body {margin: 0; padding: 0; width: 100%; height: 100%; color:white;}

Away from home till tomorrow. In the meantime add the following to the CSS for .flipcard

color: var(--text_color);

EDIT - This change has now been made to the original download file in post #1 above.

1 Like

Actually I really love what you have done.

Forgive my stupid and comedic comments, but I didn’t know that they spoke Greek then? :slight_smile: I noticed that your video started out with Greek if I’m not mistaken.

Wouldn’t a better base characterset for ancient stuff for Southern UK be Phoenician ? for which the Greek alphabet was based on. Phoenician has more in common with what we call the English language than Greek apparently has. But I could be convinced otherwise if a good explanation could be had.

Anyway, I’m just nitpicking for the sake of being annoying.

Good work. I watched it more than once and was mesmorised. I hope there were no secret subliminal instructions in it :slight_smile:

Maybe because @Elusien lives in Cyprus, where the official languages are Greek and Turkish.

I played with the settings earlier this morning, trying to simulate the airport Departure board shown in the YouTube video I posted above.

Also created a mask so 3 of the columns never show any characters.

1 Like

Flipping HECK, @elusien, this is terrific!


I chose to add the Greek alphabet since I live in Cyprus, whose official laguages are Greek, Turkish and English.

Unfortunately the Phoenician alphabet is not on the Unicode Basic Multilingual Plane (U+0000 to U+FFFF), it is on the Suplementary one (U+10000 to U+1FFFF) [PHOENICIAN LETTER ALF 𐤀 to PHOENICIAN NUMBER THREE 𐤛]and my code does not handle that. See: Unicode Characters in the Phoenician Block. The fact that the language was also written right-to-left also complicates matters.

I hope there were no secret subliminal instructions in it :slight_smile:

Just the details of my bank account and instructions on how to arrange for your salary to be paid into it.

1 Like

Nice demo. Well done!

A better-looking (and easier) solution to blanking out columns 3, 8 and 25 would be to add the following lines to the CSS:

.flipcard:nth-child(3), .flipcard:nth-child(8), .flipcard:nth-child(25) { transform: scale(0); }

Nice! Thank you

1 Like

I have created a new parameter to enable empty columns to be specified, so you can easily separate the boards into sections. The parameter is:

 --empty_columns     : 0;       /* 0, or the numbers of any columns that will not contain any flipcards to create sections  e.g. 3,8,25 */

I have also made it so all the boards are left-justified rather than centered.

The download file in post #1 has been updated accordingly.

Alf/Alef can be represented with the Greek or Modern K if the need arises.

One big problem with Phoenician language is that not many people recognise how to use that character set anymore.

But heaps thanks for providing the basic links on how I could try to get it working. I actually do have some projects that could use it. :slight_smile:

There are various Academic suggestions that the ancient Greek characterset was based on Phoenician characters, except written backwards (left to right). Hence using a flipperboard would be quite an appropriate animation for what I’m wanting to do.


When you hear a kaching in your Bank App you’ll know that I cracked it.

1 Like

I’ve been reading up on the Phoenician alphabet (Wikipedia is you friend here). Apparently they only wrote down consonants, not vowels, leaving the reader to imply what they were, so strictly speaking it was an “abjad”. The reasons behind the shape of the letters and their names is also interesting.

each Phoenician letter was based on an Egyptian hieroglyph representing an Egyptian word; this word was translated into Phoenician (or a closely related Semitic language), then the initial sound of the translated word became the letter’s Phoenician value. For example, the second letter of the Phoenician alphabet was based on the Egyptian hieroglyph for “house” (a sketch of a house); the Semitic word for “house” was bet; hence the Phoenician letter was called bet and had the sound value b .



Well yes or no. Keep in mind that wikipedia tends to align itself with Christian History and Semitic written Information has not been their friend at all - perhaps even a Contesting or opposing system? But you can research that elsewhere.

With a little bit of Phoenician, words like Africa and Asia can be decoded. “Af’rica” = ‘First Nation’ ie Af+nica. “Asia” transliterates to “Isle” or ‘Islands’ in modern English. “Morocco” which transliterates to “Moor+o+Caw” which means ‘Narrow land of the Moors’.

The list of words goes on and on. I want to learn your flipper board because it would save me so much time.

In fact, you might even get lost in Phoenician language as it is actually a “Flipperboard for Cryptographic Titles” because that is exactly what it can do. You feed it names and titles and then you can decode what the original words meant.

The Phoenicians were in Cyprus, with access to the port at Kition (Quay+Ti+On) - which means approximately ‘Quay-Station’, or ‘Place to store or hold goods for selling’ and is seemingly a Semitic Phoenician word. Although I could be wrong.

This is really cool! I’ve no time to try it out now but will certainly use it. I’m pretty sure (from memory) that these flipperboards featured in the opening credits to the movie “Clockwise” (quirky British comedy, 1986, starring John Cleese) - but I’ve searched YT for a clip of just the opening and had no luck.

Indeed, the archaeological site of Kition (or 𐤊𐤕𐤉 in Phoenician) can be visited in modern-day Larnaca

1 Like

Although this HTML is a good representation of a station information flip board, it isn’t perfect. Most of these worked by flipping just the top half of the flip card, similar to that shown in the animation below (run the pen then click on the button at the bottom):

My next project (once family who are here for Christmas return t the UK) is to modify mine to do this.


A question for you @Elusien

If, for example, I set the range to this: Code_xfSRL8ulUb

While the flip cards are spinning, only these characters will be used:

  • Upper case letters, from A to Z
  • Numbers from 0 to 9

But suppose that in addition I also wanted these characters (and only these characters) to be used as well:

Is there a way to do it?
I tried many combinations, but none worked.

Everything you post here is impressive, but when you come up with half cards flipping on the board, that will literally blow my mind :slight_smile:

Oh! by the way, for my personal use, I added this editable parameter to the list:

This allows to change the background color of the page.

It’s used here in the CSS:

I don’t know if it’s worth adding this to your HTML file though. I think most people will be satisfied with the default white background.