ZX Spectrum +3 Manual as you've never seen it before

[damieng]

Okay, slight clickbait headline but I'm really proud of this.

I took a basic text file of the ZX Spectrum +3 Manual and made it into something beautiful.

• Formatting like the original print manual
• Hand-crafted SVGs replicating the original line drawings
• Proper tables and figures
• Hyperlinked sections and references
• Canvas-drawn "screenshots" that animated on mouse hover

This manual was pretty much my bible for years as I learnt to code as a child. Nice to have a great more usable reference now as I've been hacking away on some Spectrum projects again...

https://zxspectrumvault.github.io/Manua ... anual.html

Example images







PS. I know there's a couple of missing images but I just had to set this free. You can contribute/report issues at https://github.com/ZXSpectrumVault/Manuals if you like

[flatduckrecords]

Excellence work, thank you!

I quite often look up the manual on my phone while I’m working on the Spectrum, but this is much more convenient. Displays great (especially the redrawn illustrations!) on small screen. Fab!

[EdToo]

This is fantastic.

[PeterJ]

Brilliant stuff @damieng. Very well formatted too for all devices.

[Guesser]

The bold italic markdown isn't being converted inside the <p class="warning-box"> in Chapter 10 Expansion devices

[1024MAK]

Topic bookmarked

Mark

[AndyC]

Really nice. The +3 manual is my absolute go to as the definitive version and this is definitely going straight in my bookmarks.

[Jbizzel]

Beautiful!

[AndyC]

In the chapter on sound, during the description of the PLAY command the word "rest" appears to have become "reset" on a few occasions.

[Lee Bee]

What a legend. Damien Guard makes yet another great contribution to the retro scene!

[TMD2003]

The +2A manual (in text form so that it loads in a fraction of a second) is my usual go-to manual, though most of what I need to look up is system variables, character codes and Z80 opcodes so I'm usually confined to a couple of chapters at the end.

@damieng, this is a superb effort and should be considered worth a year's supply of corned beef sandwiches. However - as a dedicated typography geek (witness all those custom character sets), if you really want a completely authentic-looking document, you'll want Rockwell for the main text, OCRB for the Spectrum listings, and - this is where the problem might be - Helvetica for the bold-italic +3. Are you using the fonts you've chosen because they're free, open-source, or otherwise unlikely to cause any legal blowback - or because it looks more modern? I had a look at the page source to see if it listed what fonts you've used but it must have been in an external style sheet. Either way, I'd bet that none of those fonts existed in 1986 when the +2 manual was written in the same style.

Maybe there could be an alternative version using the fonts from the ZX81 and 48K Spectrum manual? Unless I'm very much mistaken, that's all done in Univers with no monospaced font for the BASIC listings.

[damieng]

They're the closest free fonts I could use - I don't fancy paying $100+ for commercial web licences for Rockwell, OCR-B and Helvetica.

[TMD2003]

Thought that might be the case.

Now that I look again at the page source, I've found it's the Roboto series of fonts (I always look in HEAD for the style sheet links, not in BODY). I hadn't heard of these - they're worth looking into further...

[mjwilson]

Amazing work (the 48K and the +3 manuals were the ones I had).

One odd thing I noticed in section 6 was with the editor screen (just before the text "There are three things to notice about this screen.")

When I initially read that section, there was a non-flashing square at (0,0) - just the blue background.
So since the following text read "Firstly, there is a flashing blue and white blob in the top left-hand corner", I was going to suggest making the image flashing in this version of the manual too.

But then I hovered over and it did start flashing - incredible! However the flashing is quite uneven.

I assume that this is all being done in JS - I wonder whether there's a way of making the timings more even.

[damieng]

Yeah there is something off about the timings - Javascript animation on a canvas isn't my forte but I'll give it another bash.

[mjwilson]

Couple more things...

In the "Graphics" section, you have

Code: Select all

1000 FOR n=o TO 6 STEP 2

which should be

Code: Select all

1000 FOR n=0 TO 6 STEP 2

In the "Sound" section, in the diagram showing the waveforms of the AY chip, I can't read the full description of each waveform. For example, on the first row, I can only see "single decay" instead of "single decay then off".

[Lee Bee]

Fantastic font trivia from Jim! Though I would absolutely defer to Damien's good judgment on this as he has such a superb eye for typography. Besides, all the fonts can easily be changed in future; Damien's done all the hard grafting, setting this up.

The Roboto font began its life in 2011 with accusations of it being a mish-mash of other fonts, but it's proven to be—especially after the 2014 update—a solid and popular free Google font (along with Raleway).

I think Roboto Slab is an excellent match for the original manual, and, in fact, an improvement, because the original was quite cramped (horizontally squashed and possibly also tightly kerned). Nostalgia aside, I find the new typography more attractive and clear:



(Just noticed that where I've used ellipses above, Damien's used three full stops, which is a better match for the original manual.)

[Pobulous]

Great work, love the drawings and the animated screens.


This picture is wrong, though:
https://zxspectrumvault.github.io/Manua ... #tuning-in
The ink is always in bright, even when the paper colour isn't, which isn't possible - notice that 19 is always visible even when ink and paper colour are the same.

[mjwilson]

Yeah there is something off about the timings - Javascript animation on a canvas isn't my forte but I'll give it another bash.

OK so I think that is because you have

Code: Select all

    cursor(cx, borderSize, borderSize, state.frame % 30 > 15);

but the frame only goes from 0 to 49, and 30 doesn't divide into 50 evenly.

If I change it to

Code: Select all

    cursor(cx, borderSize, borderSize, state.frame % 50 > 25);

then it's even, but much too slow.

Code: Select all

    cursor(cx, borderSize, borderSize, state.frame % 25 > 12);

is slightly uneven but looks to be about the right speed.

[mjwilson]

In the table beginning "The following are binary operations", the original manual has a bracketed piece of text covering = from <> which says: "Both operarnds must be of the same type. The result is a number: 1 if the comparions holds; 0 if it does not".

In the HTML version, that text is merged in with the description of the individual operators, making the text somewhat unclear to read.

[mjwilson]

In the "Using the calculator" section, there's a typo, "don{1" instead of "don't".

[ZXDunny]

Section 19, the PLAY chapter, is missing a diagram and instead has an ascii representation of the stave etc. It's badly broken on a couple of lines.

[damieng]

I've been fixing these things as they get reported but the music notation one is part of the reason it sat on my drive for well over a year...

I'm tracking the last 3 diagrams on this GitHub issue https://github.com/ZXSpectrumVault/Manuals/issues/1

[mjwilson]

I've been fixing these things as they get reported but the music notation one is part of the reason it sat on my drive for well over a year...

I'm tracking the last 3 diagrams on this GitHub issue https://github.com/ZXSpectrumVault/Manuals/issues/1

That list says "Circle diagram in part 18" but that should actually be part 17.

There's also a missing diagram in "Formatting a disk" - although I don't know how useful it really is. That section also has the editorial comment "[!? never tried that one myself]" - personally I would rather just have the original text in there.

[mjwilson]

In "a diagram to show the pitch values of all the notes in one octave on the piano for BEEP", there is a minor typo on note 10, which says "GB♭" instead of "B♭".

I tried knocking up something for the musical notes diagram and got as far as this before I got bored:

Code: Select all

    <svg viewBox="0 -2 500 254" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
    <style>.clef { font-size: 60px } #notes { font-size: 30px } rect.grid { stroke-width: 1px }</style>
      <defs>
        <rect id="grid" y="0" width="15" height="220" class="grid"/>
      </defs>
     <g id="treble-clef">
      <path d="M 0 50 L 500 50"/>
      <path d="M 0 60 L 500 60"/>
      <path d="M 0 70 L 500 70"/>
      <path d="M 0 80 L 500 80"/>
      <path d="M 0 90 L 500 90"/>
      <text x="10" y="90" class="clef">&#x1D11E;</text>
    </g>
    <g id="bass-clef">
      <path d="M 0 120 L 500 120"/>
      <path d="M 0 130 L 500 130"/>
      <path d="M 0 140 L 500 140"/>
      <path d="M 0 150 L 500 150"/>
      <path d="M 0 160 L 500 160"/>
      <text x="10" y="165" class="clef">&#x1D122;</text>
     </g>
     <g>
       <use xlink:href="#grid" x="60"></use>
       <use xlink:href="#grid" x="75"></use>
       <use xlink:href="#grid" x="90"></use>
       <use xlink:href="#grid" x="105"></use>
       <use xlink:href="#grid" x="120"></use>
       <use xlink:href="#grid" x="135"></use>
       <use xlink:href="#grid" x="150"></use>
       <use xlink:href="#grid" x="165"></use>
       <use xlink:href="#grid" x="180"></use>
       <use xlink:href="#grid" x="195"></use>
       <use xlink:href="#grid" x="210"></use>
       <use xlink:href="#grid" x="225"></use>
       <use xlink:href="#grid" x="240"></use>
       <use xlink:href="#grid" x="255"></use>
       <use xlink:href="#grid" x="270"></use>
       <use xlink:href="#grid" x="285"></use>
       <use xlink:href="#grid" x="300"></use>
       <use xlink:href="#grid" x="315"></use>
       <use xlink:href="#grid" x="330"></use>
       <use xlink:href="#grid" x="345"></use>
       <use xlink:href="#grid" x="360"></use>
       <use xlink:href="#grid" x="375"></use>
       <use xlink:href="#grid" x="390"></use>
       <use xlink:href="#grid" x="405"></use>
       <use xlink:href="#grid" x="420"></use>
       <use xlink:href="#grid" x="435"></use>
       <use xlink:href="#grid" x="450"></use>
       <use xlink:href="#grid" x="465"></use>
     </g>
     <g id="upper-notenames">
      <text x="62" y="15">C</text>
      <text x="77" y="15">D</text>
      <text x="92" y="15">E</text>
      <text x="107" y="15">F</text>
      <text x="122" y="15">G</text>
      <text x="137" y="15">A</text>
      <text x="152" y="15">B</text>
      <text x="167" y="15">C</text>
      <text x="182" y="15">D</text>
      <text x="197" y="15">E</text>
      <text x="212" y="15">F</text>
      <text x="227" y="15">G</text>
      <text x="242" y="15">A</text>
      <text x="257" y="15">B</text>
      <text x="272" y="15">C</text>
      <text x="287" y="15">D</text>
      <text x="302" y="15">E</text>
      <text x="317" y="15">F</text>
      <text x="332" y="15">G</text>
      <text x="347" y="15">A</text>
      <text x="362" y="15">B</text>
      <text x="377" y="15">C</text>
      <text x="392" y="15">D</text>
      <text x="407" y="15">E</text>
      <text x="422" y="15">F</text>
      <text x="437" y="15">G</text>
      <text x="452" y="15">A</text>
      <text x="467" y="15">B</text>
     </g>
     <g id="o3-notenames">
      <text x="62" y="205">c</text>
      <text x="77" y="205">d</text>
      <text x="92" y="205">e</text>
      <text x="107" y="205">f</text>
      <text x="122" y="205">g</text>
      <text x="137" y="205">a</text>
      <text x="152" y="205">b</text>
      <text x="167" y="205">C</text>
      <text x="182" y="205">D</text>
      <text x="197" y="205">E</text>
      <text x="212" y="205">F</text>
      <text x="227" y="205">G</text>
      <text x="242" y="205">A</text>
      <text x="257" y="205">B</text>
     </g>
     <g id="notes">
      <path d="M 62 180 L 73 180"/>
      <text x="62" y="183">&#x1D158;</text>
      <path d="M 77 170 L 88 170"/>
      <text x="77" y="177">&#x1D158;</text>
      <path d="M 92 170 L 103 170"/>
      <text x="92" y="173">&#x1D158;</text>
      <text x="107" y="167">&#x1D158;</text>
    </svg>