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

[mjwilson]

I think this more-or-less works, although some tweaking of the sizes might help, and I'm sure the SVG could be written better.

Code: Select all

    <svg viewBox="-2 -2 506 320" 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, .octave-box rect { stroke-width: 1px }
      .octave-box rect { fill: white }
     </style>
      <defs>
        <rect id="grid-o3" y="10" width="15" height="200" class="grid"/>
        <rect id="grid-o4" y="10" width="15" height="240" class="grid"/>
        <rect id="grid-o5" y="10" width="15" height="280" class="grid"/>
      </defs>
     <g id="treble-clef">
      <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"/>
      <path d="M 0 100 L 500 100"/>
      <text x="10" y="100" 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>
     <path d="M 0 60 L 0 160"/>
     <path d="M 5 60 L 5 160"/>
     <path d="M 500 60 L 500 160"/>
     <g>
       <use xlink:href="#grid-o3" x="60"></use>
       <use xlink:href="#grid-o3" x="75"></use>
       <use xlink:href="#grid-o3" x="90"></use>
       <use xlink:href="#grid-o3" x="105"></use>
       <use xlink:href="#grid-o3" x="120"></use>
       <use xlink:href="#grid-o3" x="135"></use>
       <use xlink:href="#grid-o3" x="150"></use>
       <use xlink:href="#grid-o4" x="165"></use>
       <use xlink:href="#grid-o4" x="180"></use>
       <use xlink:href="#grid-o4" x="195"></use>
       <use xlink:href="#grid-o4" x="210"></use>
       <use xlink:href="#grid-o4" x="225"></use>
       <use xlink:href="#grid-o4" x="240"></use>
       <use xlink:href="#grid-o4" x="255"></use>
       <use xlink:href="#grid-o5" x="270"></use>
       <use xlink:href="#grid-o5" x="285"></use>
       <use xlink:href="#grid-o5" x="300"></use>
       <use xlink:href="#grid-o5" x="315"></use>
       <use xlink:href="#grid-o5" x="330"></use>
       <use xlink:href="#grid-o5" x="345"></use>
       <use xlink:href="#grid-o5" x="360"></use>
       <use xlink:href="#grid-o5" x="375"></use>
       <use xlink:href="#grid-o5" x="390"></use>
       <use xlink:href="#grid-o5" x="405"></use>
       <use xlink:href="#grid-o5" x="420"></use>
       <use xlink:href="#grid-o5" x="435"></use>
       <use xlink:href="#grid-o5" x="450"></use>
       <use xlink:href="#grid-o5" x="465"></use>
     </g>
     <g id="upper-notenames">
      <text x="62" y="25">C</text>
      <text x="77" y="25">D</text>
      <text x="92" y="25">E</text>
      <text x="107" y="25">F</text>
      <text x="122" y="25">G</text>
      <text x="137" y="25">A</text>
      <text x="152" y="25">B</text>
      <text x="167" y="25">C</text>
      <text x="182" y="25">D</text>
      <text x="197" y="25">E</text>
      <text x="212" y="25">F</text>
      <text x="227" y="25">G</text>
      <text x="242" y="25">A</text>
      <text x="257" y="25">B</text>
      <text x="272" y="25">C</text>
      <text x="287" y="25">D</text>
      <text x="302" y="25">E</text>
      <text x="317" y="25">F</text>
      <text x="332" y="25">G</text>
      <text x="347" y="25">A</text>
      <text x="362" y="25">B</text>
      <text x="377" y="25">C</text>
      <text x="392" y="25">D</text>
      <text x="407" y="25">E</text>
      <text x="422" y="25">F</text>
      <text x="437" y="25">G</text>
      <text x="452" y="25">A</text>
      <text x="467" y="25">B</text>
     </g>
     <g id="o3-notenames">
      <text x="63" y="205">c</text>
      <text x="78" y="205">d</text>
      <text x="94" y="205">e</text>
      <text x="109" y="205">f</text>
      <text x="123" y="205">g</text>
      <text x="138" y="205">a</text>
      <text x="153" 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="o3-box" class="octave-box">
      <rect x="60" y="210" width="210" height="20"/>
      <text x="120" y="225">OCTAVE 3</text>
     </g>
     <g id="o4-notenames">
      <text x="168" y="245">c</text>
      <text x="183" y="245">d</text>
      <text x="199" y="245">e</text>
      <text x="214" y="245">f</text>
      <text x="228" y="245">g</text>
      <text x="243" y="245">a</text>
      <text x="258" y="245">b</text>
      <text x="272" y="245">C</text>
      <text x="287" y="245">D</text>
      <text x="302" y="245">E</text>
      <text x="317" y="245">F</text>
      <text x="332" y="245">G</text>
      <text x="347" y="245">A</text>
      <text x="362" y="245">B</text>
     </g>
     <g id="o4-box" class="octave-box">
      <rect x="165" y="250" width="210" height="20"/>
      <text x="225" y="265">OCTAVE 4</text>
     </g>
     <g id="o5-notenames">
      <text x="273" y="285">c</text>
      <text x="288" y="285">d</text>
      <text x="304" y="285">e</text>
      <text x="319" y="285">f</text>
      <text x="333" y="285">g</text>
      <text x="348" y="285">a</text>
      <text x="363" y="285">b</text>
      <text x="377" y="285">C</text>
      <text x="392" y="285">D</text>
      <text x="407" y="285">E</text>
      <text x="422" y="285">F</text>
      <text x="437" y="285">G</text>
      <text x="452" y="285">A</text>
      <text x="467" y="285">B</text>
     </g>
     <g id="o5-box" class="octave-box">
      <rect x="270" y="290" width="210" height="20"/>
      <text x="330" y="305">OCTAVE 5</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>
      <text x="122" y="163">&#x1D158;</text>
      <text x="137" y="158">&#x1D158;</text>
      <text x="152" y="153">&#x1D158;</text>
      <text x="167" y="148">&#x1D158;</text>
      <text x="182" y="143">&#x1D158;</text>
      <text x="197" y="138">&#x1D158;</text>
      <text x="212" y="133">&#x1D158;</text>
      <text x="227" y="128">&#x1D158;</text>
      <text x="242" y="123">&#x1D158;</text>
      <path d="M 257 110 L 268 110"/>
      <text x="257" y="117">&#x1D158;</text>
      <path d="M 272 110 L 283 110"/>
      <text x="272" y="113">&#x1D158;</text>
      <path d="M 287 110 L 298 110"/>
      <text x="287" y="108">&#x1D158;</text>
      <text x="302" y="103">&#x1D158;</text>
      <text x="317" y="98">&#x1D158;</text>
      <text x="332" y="93">&#x1D158;</text>
      <text x="347" y="88">&#x1D158;</text>
      <text x="362" y="83">&#x1D158;</text>
      <text x="377" y="78">&#x1D158;</text>
      <text x="392" y="73">&#x1D158;</text>
      <text x="407" y="68">&#x1D158;</text>
      <text x="422" y="63">&#x1D158;</text>
      <path d="M 437 50 L 448 50"/>
      <text x="437" y="58">&#x1D158;</text>
      <path d="M 452 50 L 463 50"/>
      <text x="452" y="53">&#x1D158;</text>
      <path d="M 467 50 L 478 50"/>
      <text x="467" y="49">&#x1D158;</text>
    </svg>

[damieng]

Cool, thanks for that! I've made your other corrections will take a look at getting this in soon.

[damieng]

Music scale diagram is now in! (I did a tiny tweak to font sizes/weight but that's it)

Looks great!

Thanks again.

[mjwilson]

My pleasure!

In the next couple of tables, the appearance of the musical notes is very uneven.
The triplets in the second table look very grey compared with the notes in the first table.

I guess that's because the first table is using Unicode characters and the second is using SVG paths?

The triplets look better if I disable the "fill: none" rule in devtools.

[equinox]

I don't suppose the online manual should be updated with corrections, but curiously I had never noticed this error before:

If your tape has more than one program stored on the same side, then each program will have a name. You can choose the program you wish to load using the LOAD command - for instance, if the one you want is called HELICOPTER, you could type...
LOAD "helicopter"

That ain't gonna work, is it?

[damieng]

I've thought about adding some annotations that can be toggled on/off (as well as some theme options etc).

[flatduckrecords]

I've thought about adding some annotations that can be toggled on/off (as well as some theme options etc).

On that note I’ve a couple of suggestions:

1) Under “Serial devices” (manual page 321) the table is not wrong but is confusing. TXD is input and RXD is output - this is correct for DCE equipment, not DTE that one might expect. A wee note to mention DCE might be helpful?

2) Under “Auxiliary interface” (page 322) bit 7 at the foot of the table should be labelled as RS232 pin 2 (not pin 5, the manual is wrong).

[Jbizzel]

I think this more-or-less works, although some tweaking of the sizes might help, and I'm sure the SVG could be written better.

Code: Select all

    <svg viewBox="-2 -2 506 320" 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, .octave-box rect { stroke-width: 1px }
      .octave-box rect { fill: white }
     </style>
      <defs>
        <rect id="grid-o3" y="10" width="15" height="200" class="grid"/>
        <rect id="grid-o4" y="10" width="15" height="240" class="grid"/>
        <rect id="grid-o5" y="10" width="15" height="280" class="grid"/>
      </defs>
     <g id="treble-clef">
      <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"/>
      <path d="M 0 100 L 500 100"/>
      <text x="10" y="100" 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>
     <path d="M 0 60 L 0 160"/>
     <path d="M 5 60 L 5 160"/>
     <path d="M 500 60 L 500 160"/>
     <g>
       <use xlink:href="#grid-o3" x="60"></use>
       <use xlink:href="#grid-o3" x="75"></use>
       <use xlink:href="#grid-o3" x="90"></use>
       <use xlink:href="#grid-o3" x="105"></use>
       <use xlink:href="#grid-o3" x="120"></use>
       <use xlink:href="#grid-o3" x="135"></use>
       <use xlink:href="#grid-o3" x="150"></use>
       <use xlink:href="#grid-o4" x="165"></use>
       <use xlink:href="#grid-o4" x="180"></use>
       <use xlink:href="#grid-o4" x="195"></use>
       <use xlink:href="#grid-o4" x="210"></use>
       <use xlink:href="#grid-o4" x="225"></use>
       <use xlink:href="#grid-o4" x="240"></use>
       <use xlink:href="#grid-o4" x="255"></use>
       <use xlink:href="#grid-o5" x="270"></use>
       <use xlink:href="#grid-o5" x="285"></use>
       <use xlink:href="#grid-o5" x="300"></use>
       <use xlink:href="#grid-o5" x="315"></use>
       <use xlink:href="#grid-o5" x="330"></use>
       <use xlink:href="#grid-o5" x="345"></use>
       <use xlink:href="#grid-o5" x="360"></use>
       <use xlink:href="#grid-o5" x="375"></use>
       <use xlink:href="#grid-o5" x="390"></use>
       <use xlink:href="#grid-o5" x="405"></use>
       <use xlink:href="#grid-o5" x="420"></use>
       <use xlink:href="#grid-o5" x="435"></use>
       <use xlink:href="#grid-o5" x="450"></use>
       <use xlink:href="#grid-o5" x="465"></use>
     </g>
     <g id="upper-notenames">
      <text x="62" y="25">C</text>
      <text x="77" y="25">D</text>
      <text x="92" y="25">E</text>
      <text x="107" y="25">F</text>
      <text x="122" y="25">G</text>
      <text x="137" y="25">A</text>
      <text x="152" y="25">B</text>
      <text x="167" y="25">C</text>
      <text x="182" y="25">D</text>
      <text x="197" y="25">E</text>
      <text x="212" y="25">F</text>
      <text x="227" y="25">G</text>
      <text x="242" y="25">A</text>
      <text x="257" y="25">B</text>
      <text x="272" y="25">C</text>
      <text x="287" y="25">D</text>
      <text x="302" y="25">E</text>
      <text x="317" y="25">F</text>
      <text x="332" y="25">G</text>
      <text x="347" y="25">A</text>
      <text x="362" y="25">B</text>
      <text x="377" y="25">C</text>
      <text x="392" y="25">D</text>
      <text x="407" y="25">E</text>
      <text x="422" y="25">F</text>
      <text x="437" y="25">G</text>
      <text x="452" y="25">A</text>
      <text x="467" y="25">B</text>
     </g>
     <g id="o3-notenames">
      <text x="63" y="205">c</text>
      <text x="78" y="205">d</text>
      <text x="94" y="205">e</text>
      <text x="109" y="205">f</text>
      <text x="123" y="205">g</text>
      <text x="138" y="205">a</text>
      <text x="153" 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="o3-box" class="octave-box">
      <rect x="60" y="210" width="210" height="20"/>
      <text x="120" y="225">OCTAVE 3</text>
     </g>
     <g id="o4-notenames">
      <text x="168" y="245">c</text>
      <text x="183" y="245">d</text>
      <text x="199" y="245">e</text>
      <text x="214" y="245">f</text>
      <text x="228" y="245">g</text>
      <text x="243" y="245">a</text>
      <text x="258" y="245">b</text>
      <text x="272" y="245">C</text>
      <text x="287" y="245">D</text>
      <text x="302" y="245">E</text>
      <text x="317" y="245">F</text>
      <text x="332" y="245">G</text>
      <text x="347" y="245">A</text>
      <text x="362" y="245">B</text>
     </g>
     <g id="o4-box" class="octave-box">
      <rect x="165" y="250" width="210" height="20"/>
      <text x="225" y="265">OCTAVE 4</text>
     </g>
     <g id="o5-notenames">
      <text x="273" y="285">c</text>
      <text x="288" y="285">d</text>
      <text x="304" y="285">e</text>
      <text x="319" y="285">f</text>
      <text x="333" y="285">g</text>
      <text x="348" y="285">a</text>
      <text x="363" y="285">b</text>
      <text x="377" y="285">C</text>
      <text x="392" y="285">D</text>
      <text x="407" y="285">E</text>
      <text x="422" y="285">F</text>
      <text x="437" y="285">G</text>
      <text x="452" y="285">A</text>
      <text x="467" y="285">B</text>
     </g>
     <g id="o5-box" class="octave-box">
      <rect x="270" y="290" width="210" height="20"/>
      <text x="330" y="305">OCTAVE 5</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>
      <text x="122" y="163">&#x1D158;</text>
      <text x="137" y="158">&#x1D158;</text>
      <text x="152" y="153">&#x1D158;</text>
      <text x="167" y="148">&#x1D158;</text>
      <text x="182" y="143">&#x1D158;</text>
      <text x="197" y="138">&#x1D158;</text>
      <text x="212" y="133">&#x1D158;</text>
      <text x="227" y="128">&#x1D158;</text>
      <text x="242" y="123">&#x1D158;</text>
      <path d="M 257 110 L 268 110"/>
      <text x="257" y="117">&#x1D158;</text>
      <path d="M 272 110 L 283 110"/>
      <text x="272" y="113">&#x1D158;</text>
      <path d="M 287 110 L 298 110"/>
      <text x="287" y="108">&#x1D158;</text>
      <text x="302" y="103">&#x1D158;</text>
      <text x="317" y="98">&#x1D158;</text>
      <text x="332" y="93">&#x1D158;</text>
      <text x="347" y="88">&#x1D158;</text>
      <text x="362" y="83">&#x1D158;</text>
      <text x="377" y="78">&#x1D158;</text>
      <text x="392" y="73">&#x1D158;</text>
      <text x="407" y="68">&#x1D158;</text>
      <text x="422" y="63">&#x1D158;</text>
      <path d="M 437 50 L 448 50"/>
      <text x="437" y="58">&#x1D158;</text>
      <path d="M 452 50 L 463 50"/>
      <text x="452" y="53">&#x1D158;</text>
      <path d="M 467 50 L 478 50"/>
      <text x="467" y="49">&#x1D158;</text>
    </svg>

I don't know if this has been fixed, but the stave is fine (G note), but the bass clef should point to the F note.

[mjwilson]

I don't know if this has been fixed, but the stave is fine (G note), but the bass clef should point to the F note.

Ah rats! It's slightly perilous anyway because I'm just using a Unicode character for the clefs, and then adjusting them by eye to line up - I don't have total control of where the different parts line up.

It does look a bit closer in the online version than in the image I posted.
https://zxspectrumvault.github.io/Manua ... tml#part19

[mjwilson]

In part 14, "The Character Set", the 2 diagrams showing the keyboard have weird alignment of the text on the buttons.

[mjwilson]

My attempt at the screen diagram from part 15.

Code: Select all

<svg viewBox="-2 -2 500 600" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
  <style>
    rect.grid { stroke-width: 1px }
    .xsmall { font-size: 6px }
    .small { font-size: 8px }
    .large { font-size: 32px }
    .kw { font-weight: bold }
  </style>
  <defs>
    <rect id="column" y="42" width="16" height="512" class="grid"/>
    <rect id="row" x="60" width="384" height="16" class="grid"/>
  </defs>
  <g>
     <use xlink:href="#column" x="60"></use>
     <use xlink:href="#column" x="76"></use>
     <use xlink:href="#column" x="92"></use>
     <use xlink:href="#column" x="108"></use>
     <use xlink:href="#column" x="124"></use>
     <use xlink:href="#column" x="140"></use>
     <use xlink:href="#column" x="156"></use>
     <use xlink:href="#column" x="172"></use>
     <use xlink:href="#column" x="188"></use>
     <use xlink:href="#column" x="204"></use>
     <use xlink:href="#column" x="220"></use>
     <use xlink:href="#column" x="236"></use>
     <use xlink:href="#column" x="252"></use>
     <use xlink:href="#column" x="268"></use>
     <use xlink:href="#column" x="284"></use>
     <use xlink:href="#column" x="300"></use>
     <use xlink:href="#column" x="316"></use>
     <use xlink:href="#column" x="332"></use>
     <use xlink:href="#column" x="348"></use>
     <use xlink:href="#column" x="364"></use>
     <use xlink:href="#column" x="380"></use>
     <use xlink:href="#column" x="396"></use>
     <use xlink:href="#column" x="412"></use>
     <use xlink:href="#column" x="428"></use>
     <use xlink:href="#row" y="42"></use>
     <use xlink:href="#row" y="58"></use>
     <use xlink:href="#row" y="74"></use>
     <use xlink:href="#row" y="90"></use>
     <use xlink:href="#row" y="106"></use>
     <use xlink:href="#row" y="122"></use>
     <use xlink:href="#row" y="138"></use>
     <use xlink:href="#row" y="154"></use>
     <use xlink:href="#row" y="170"></use>
     <use xlink:href="#row" y="186"></use>
     <use xlink:href="#row" y="202"></use>
     <use xlink:href="#row" y="218"></use>
     <use xlink:href="#row" y="234"></use>
     <use xlink:href="#row" y="250"></use>
     <use xlink:href="#row" y="266"></use>
     <use xlink:href="#row" y="282"></use>
     <use xlink:href="#row" y="298"></use>
     <use xlink:href="#row" y="314"></use>
     <use xlink:href="#row" y="330"></use>
     <use xlink:href="#row" y="346"></use>
     <use xlink:href="#row" y="362"></use>
     <use xlink:href="#row" y="378"></use>
     <use xlink:href="#row" y="394"></use>
     <use xlink:href="#row" y="410"></use>
     <use xlink:href="#row" y="426"></use>
     <use xlink:href="#row" y="442"></use>
     <use xlink:href="#row" y="458"></use>
     <use xlink:href="#row" y="474"></use>
     <use xlink:href="#row" y="490"></use>
     <use xlink:href="#row" y="506"></use>
     <use xlink:href="#row" y="522"></use>
     <use xlink:href="#row" y="538"></use>
  </g>
  <g id="warning">
    <text x="92" y="5" class="small">You cannot normally <tspan class="kw">PRINT</tspan> or <tspan class="kw">PLOT</tspan></text>
    <text x="92" y="17" class="small">on the bottom two lines</text>
    <path d="M88,11 L76,11 L76,28"/>
    <text x="28" y="5" class="large" transform="translate(72,0) rotate(90)">{</text>
  </g>
    <text x="28" y="35" class="small" transform="translate(469,0) rotate(90)">0</text>
    <text x="28" y="35" class="small" transform="translate(453,0) rotate(90)">1</text>
    <text x="28" y="35" class="small" transform="translate(437,0) rotate(90)">2</text>
    <text x="28" y="35" class="small" transform="translate(421,0) rotate(90)">3</text>
    <text x="28" y="35" class="small" transform="translate(405,0) rotate(90)">4</text>
    <text x="28" y="35" class="small" transform="translate(389,0) rotate(90)">5</text>
    <text x="28" y="35" class="small" transform="translate(373,0) rotate(90)">6</text>
    <text x="28" y="35" class="small" transform="translate(357,0) rotate(90)">7</text>
    <text x="28" y="35" class="small" transform="translate(341,0) rotate(90)">8</text>
    <text x="28" y="35" class="small" transform="translate(325,0) rotate(90)">9</text>
    <text x="28" y="35" class="small" transform="translate(309,0) rotate(90)">10</text>
    <text x="28" y="35" class="small" transform="translate(293,0) rotate(90)">11</text>
    <text x="28" y="35" class="small" transform="translate(277,0) rotate(90)">12</text>
    <text x="28" y="35" class="small" transform="translate(261,0) rotate(90)">13</text>
    <text x="28" y="35" class="small" transform="translate(245,0) rotate(90)">14</text>
    <text x="28" y="35" class="small" transform="translate(229,0) rotate(90)">15</text>
    <text x="28" y="35" class="small" transform="translate(213,0) rotate(90)">16</text>
    <text x="28" y="35" class="small" transform="translate(197,0) rotate(90)">17</text>
    <text x="28" y="35" class="small" transform="translate(181,0) rotate(90)">18</text>
    <text x="28" y="35" class="small" transform="translate(165,0) rotate(90)">19</text>
    <text x="28" y="35" class="small" transform="translate(149,0) rotate(90)">20</text>
    <text x="28" y="35" class="small" transform="translate(133,0) rotate(90)">21</text>

    <text x="48" y="35" class="small" transform="translate(501,0) rotate(90)">Columns &#x27F6;</text>
    <text x="48" y="35" class="small" transform="translate(485,0) rotate(90)">0</text>
    <text x="64" y="35" class="small" transform="translate(485,0) rotate(90)">1</text>
    <text x="80" y="35" class="small" transform="translate(485,0) rotate(90)">2</text>
    <text x="96" y="35" class="small" transform="translate(485,0) rotate(90)">3</text>
    <text x="112" y="35" class="small" transform="translate(485,0) rotate(90)">4</text>
    <text x="128" y="35" class="small" transform="translate(485,0) rotate(90)">5</text>
    <text x="144" y="35" class="small" transform="translate(485,0) rotate(90)">6</text>
    <text x="160" y="35" class="small" transform="translate(485,0) rotate(90)">7</text>
    <text x="176" y="35" class="small" transform="translate(485,0) rotate(90)">8</text>
    <text x="192" y="35" class="small" transform="translate(485,0) rotate(90)">9</text>
    <text x="208" y="35" class="small" transform="translate(485,0) rotate(90)">10</text>
    <text x="224" y="35" class="small" transform="translate(485,0) rotate(90)">11</text>
    <text x="240" y="35" class="small" transform="translate(485,0) rotate(90)">12</text>
    <text x="256" y="35" class="small" transform="translate(485,0) rotate(90)">13</text>
    <text x="272" y="35" class="small" transform="translate(485,0) rotate(90)">14</text>
    <text x="288" y="35" class="small" transform="translate(485,0) rotate(90)">15</text>
    <text x="304" y="35" class="small" transform="translate(485,0) rotate(90)">16</text>
    <text x="320" y="35" class="small" transform="translate(485,0) rotate(90)">17</text>
    <text x="336" y="35" class="small" transform="translate(485,0) rotate(90)">18</text>
    <text x="352" y="35" class="small" transform="translate(485,0) rotate(90)">19</text>
    <text x="368" y="35" class="small" transform="translate(485,0) rotate(90)">20</text>
    <text x="384" y="35" class="small" transform="translate(485,0) rotate(90)">21</text>
    <text x="400" y="35" class="small" transform="translate(485,0) rotate(90)">22</text>
    <text x="416" y="35" class="small" transform="translate(485,0) rotate(90)">23</text>
    <text x="432" y="35" class="small" transform="translate(485,0) rotate(90)">24</text>
    <text x="448" y="35" class="small" transform="translate(485,0) rotate(90)">25</text>
    <text x="464" y="35" class="small" transform="translate(485,0) rotate(90)">26</text>
    <text x="480" y="35" class="small" transform="translate(485,0) rotate(90)">27</text>
    <text x="496" y="35" class="small" transform="translate(485,0) rotate(90)">28</text>
    <text x="512" y="35" class="small" transform="translate(485,0) rotate(90)">29</text>
    <text x="528" y="35" class="small" transform="translate(485,0) rotate(90)">30</text>
    <text x="544" y="35" class="small" transform="translate(485,0) rotate(90)">31</text>

    <text x="94" y="580" class="small">Pixel y coordinates &#x27F6;</text>
    <text x="94" y="562" class="xsmall">0</text>
    <text x="101" y="568" class="xsmall">7</text>
    <text x="110" y="562" class="xsmall">8</text>
    <text x="117" y="568" class="xsmall">15</text>
    <text x="126" y="562" class="xsmall">16</text>
    <text x="133" y="568" class="xsmall">23</text>
    <text x="142" y="562" class="xsmall">24</text>
    <text x="149" y="568" class="xsmall">31</text>
    <text x="158" y="562" class="xsmall">32</text>
    <text x="165" y="568" class="xsmall">39</text>
    <text x="174" y="562" class="xsmall">40</text>
    <text x="181" y="568" class="xsmall">47</text>
    <text x="190" y="562" class="xsmall">48</text>
    <text x="197" y="568" class="xsmall">55</text>
    <text x="206" y="562" class="xsmall">56</text>
    <text x="213" y="568" class="xsmall">63</text>
    <text x="222" y="562" class="xsmall">64</text>
    <text x="229" y="568" class="xsmall">71</text>
    <text x="238" y="562" class="xsmall">72</text>
    <text x="245" y="568" class="xsmall">79</text>
    <text x="254" y="562" class="xsmall">80</text>
    <text x="261" y="568" class="xsmall">87</text>
    <text x="270" y="562" class="xsmall">88</text>
    <text x="277" y="568" class="xsmall">95</text>
    <text x="286" y="562" class="xsmall">96</text>
    <text x="291" y="568" class="xsmall">103</text>
    <text x="302" y="562" class="xsmall">104</text>
    <text x="307" y="568" class="xsmall">111</text>
    <text x="318" y="562" class="xsmall">112</text>
    <text x="323" y="568" class="xsmall">119</text>
    <text x="334" y="562" class="xsmall">120</text>
    <text x="339" y="568" class="xsmall">127</text>
    <text x="350" y="562" class="xsmall">128</text>
    <text x="355" y="568" class="xsmall">135</text>
    <text x="366" y="562" class="xsmall">136</text>
    <text x="371" y="568" class="xsmall">143</text>
    <text x="382" y="562" class="xsmall">144</text>
    <text x="387" y="568" class="xsmall">151</text>
    <text x="398" y="562" class="xsmall">152</text>
    <text x="403" y="568" class="xsmall">159</text>
    <text x="414" y="562" class="xsmall">160</text>
    <text x="419" y="568" class="xsmall">167</text>
    <text x="430" y="562" class="xsmall">168</text>
    <text x="435" y="568" class="xsmall">175</text>

    <text x="52" y="35" class="small" transform="translate(85,0) rotate(90)">Pixel x coordinates &#x27F6;</text>
    <text x="43" y="35" class="xsmall" transform="translate(122,0) rotate(90)">0</text>
    <text x="52" y="35" class="xsmall" transform="translate(114,0) rotate(90)">7</text>
    <text x="59" y="35" class="xsmall" transform="translate(122,0) rotate(90)">8</text>
    <text x="65" y="35" class="xsmall" transform="translate(114,0) rotate(90)">15</text>
    <text x="75" y="35" class="xsmall" transform="translate(122,0) rotate(90)">16</text>
    <text x="81" y="35" class="xsmall" transform="translate(114,0) rotate(90)">23</text>
    <text x="91" y="35" class="xsmall" transform="translate(122,0) rotate(90)">24</text>
    <text x="97" y="35" class="xsmall" transform="translate(114,0) rotate(90)">31</text>
    <text x="107" y="35" class="xsmall" transform="translate(122,0) rotate(90)">32</text>
    <text x="113" y="35" class="xsmall" transform="translate(114,0) rotate(90)">39</text>
    <text x="123" y="35" class="xsmall" transform="translate(122,0) rotate(90)">40</text>
    <text x="129" y="35" class="xsmall" transform="translate(114,0) rotate(90)">47</text>
    <text x="139" y="35" class="xsmall" transform="translate(122,0) rotate(90)">48</text>
    <text x="145" y="35" class="xsmall" transform="translate(114,0) rotate(90)">55</text>
    <text x="155" y="35" class="xsmall" transform="translate(122,0) rotate(90)">56</text>
    <text x="161" y="35" class="xsmall" transform="translate(114,0) rotate(90)">63</text>
    <text x="171" y="35" class="xsmall" transform="translate(122,0) rotate(90)">64</text>
    <text x="177" y="35" class="xsmall" transform="translate(114,0) rotate(90)">71</text>
    <text x="187" y="35" class="xsmall" transform="translate(122,0) rotate(90)">72</text>
    <text x="193" y="35" class="xsmall" transform="translate(114,0) rotate(90)">79</text>
    <text x="203" y="35" class="xsmall" transform="translate(122,0) rotate(90)">80</text>
    <text x="209" y="35" class="xsmall" transform="translate(114,0) rotate(90)">87</text>
    <text x="219" y="35" class="xsmall" transform="translate(122,0) rotate(90)">88</text>
    <text x="225" y="35" class="xsmall" transform="translate(114,0) rotate(90)">95</text>
    <text x="235" y="35" class="xsmall" transform="translate(122,0) rotate(90)">96</text>
    <text x="239" y="35" class="xsmall" transform="translate(114,0) rotate(90)">103</text>
    <text x="251" y="35" class="xsmall" transform="translate(122,0) rotate(90)">104</text>
    <text x="255" y="35" class="xsmall" transform="translate(114,0) rotate(90)">111</text>
    <text x="267" y="35" class="xsmall" transform="translate(122,0) rotate(90)">112</text>
    <text x="271" y="35" class="xsmall" transform="translate(114,0) rotate(90)">119</text>
    <text x="283" y="35" class="xsmall" transform="translate(122,0) rotate(90)">120</text>
    <text x="287" y="35" class="xsmall" transform="translate(114,0) rotate(90)">127</text>
    <text x="299" y="35" class="xsmall" transform="translate(122,0) rotate(90)">128</text>
    <text x="303" y="35" class="xsmall" transform="translate(114,0) rotate(90)">135</text>
    <text x="315" y="35" class="xsmall" transform="translate(122,0) rotate(90)">136</text>
    <text x="319" y="35" class="xsmall" transform="translate(114,0) rotate(90)">143</text>
    <text x="331" y="35" class="xsmall" transform="translate(122,0) rotate(90)">144</text>
    <text x="335" y="35" class="xsmall" transform="translate(114,0) rotate(90)">151</text>
    <text x="347" y="35" class="xsmall" transform="translate(122,0) rotate(90)">152</text>
    <text x="351" y="35" class="xsmall" transform="translate(114,0) rotate(90)">159</text>
    <text x="363" y="35" class="xsmall" transform="translate(122,0) rotate(90)">160</text>
    <text x="367" y="35" class="xsmall" transform="translate(114,0) rotate(90)">167</text>
    <text x="379" y="35" class="xsmall" transform="translate(122,0) rotate(90)">168</text>
    <text x="383" y="35" class="xsmall" transform="translate(114,0) rotate(90)">175</text>
    <text x="395" y="35" class="xsmall" transform="translate(122,0) rotate(90)">176</text>
    <text x="399" y="35" class="xsmall" transform="translate(114,0) rotate(90)">183</text>
    <text x="411" y="35" class="xsmall" transform="translate(122,0) rotate(90)">184</text>
    <text x="415" y="35" class="xsmall" transform="translate(114,0) rotate(90)">191</text>
    <text x="427" y="35" class="xsmall" transform="translate(122,0) rotate(90)">192</text>
    <text x="431" y="35" class="xsmall" transform="translate(114,0) rotate(90)">199</text>
    <text x="443" y="35" class="xsmall" transform="translate(122,0) rotate(90)">200</text>
    <text x="447" y="35" class="xsmall" transform="translate(114,0) rotate(90)">207</text>
    <text x="459" y="35" class="xsmall" transform="translate(122,0) rotate(90)">208</text>
    <text x="463" y="35" class="xsmall" transform="translate(114,0) rotate(90)">215</text>
    <text x="475" y="35" class="xsmall" transform="translate(122,0) rotate(90)">216</text>
    <text x="479" y="35" class="xsmall" transform="translate(114,0) rotate(90)">223</text>
    <text x="491" y="35" class="xsmall" transform="translate(122,0) rotate(90)">224</text>
    <text x="495" y="35" class="xsmall" transform="translate(114,0) rotate(90)">231</text>
    <text x="507" y="35" class="xsmall" transform="translate(122,0) rotate(90)">232</text>
    <text x="511" y="35" class="xsmall" transform="translate(114,0) rotate(90)">239</text>
    <text x="523" y="35" class="xsmall" transform="translate(122,0) rotate(90)">240</text>
    <text x="527" y="35" class="xsmall" transform="translate(114,0) rotate(90)">247</text>
    <text x="539" y="35" class="xsmall" transform="translate(122,0) rotate(90)">248</text>
    <text x="543" y="35" class="xsmall" transform="translate(114,0) rotate(90)">255</text>

    <g id="example">
      <text x="430" y="35" class="small" transform="translate(513,0) rotate(90)">An example: this is</text>
      <text x="430" y="35" class="small" transform="translate(501,0) rotate(90)">the pixel (191, 159)</text>
      <path d="M475,426 L475,412 L409,412 L409,418"/>
      <polygon points="407,416 411,416 409,420" fill="black" />
      <rect x="409" y="423" height="2" width="2"/>
    </g>

</svg>

[damieng]

Cool, thanks for the diagram - now added!

I'll try and figure out what's going on with the keyboard diagrams over the weekend - got so much other stuff on right now.

Errata we should probably compile into a separate document and then later integrate with some sort of annotation mode.

[mjwilson]

Errata we should probably compile into a separate document and then later integrate with some sort of annotation mode.

I have a bunch of extra error reports in part 29 written in.

[damieng]

We could put the errata on this wiki page for now so it's with the manual until we can integrate it properly.

https://github.com/ZXSpectrumVault/Manu ... ual-Errata

[mjwilson]

Would you be interested in suggestions for improving the typography, or is that a bit too pedantic for you?

[mjwilson]

Typo:

"There is a function called ATTR that finds out what the attributes ate "

ate -> are

[damieng]

You can make font suggestions.

[mjwilson]

It was a bit more pedantic that that actually, it was about lists.

There's a few lists which are numbered with (i), (ii) etc (eg starting with "An 8 x 8 grid of 0s and 1s to define the shape of the character")

But because these are implemented as paragraphs not lists, the text isn't nicely aligned.

I think you can fix this by changing as follows:

Code: Select all

ol.roman { list-style: lower-roman }

 ol.roman {
  counter-reset: list;
}

ol.roman > li {
  list-style: none;
  counter-increment: list;
}

ol.roman > li::marker {
  content: "(" counter(list, lower-roman) ")\a0";
}

and

Code: Select all

<ol class="roman">
  <li>An 8 x 8 grid of 0s and 1s to define the shape of the character, with 0 for paper and 1 for ink.</p>
  <li>Ink and paper colours, each coded into a number between 0 and 7.</p>
  <li>A brightness - 0 for normal, 1 for extra bright.</p>
  <li>A flash number - 0 for steady, 1 for flashing.</p>
</ol>

[damieng]

I think at all places in the +3 manual where it uses Roman numeral lists the text does not indent on subsequent lines so I think this change would actually take us away from the +3 manual design?

[mjwilson]

I think at all places in the +3 manual where it uses Roman numeral lists the text does not indent on subsequent lines so I think this change would actually take us away from the +3 manual design?

Hmm, good point.

[mjwilson]

OK I think this works:

Code: Select all

 ol.roman { list-style: lower-roman; list-style-position: inside }

ol.roman > li {
  counter-increment: list;
}
ol.roman > li::marker {
  content: "(" counter(list, lower-roman) ")\a0";
}

I could put a PR together if that helps.

[Guesser]

What is the "build" process for this, is the markdown the source for the html or are they both generated from some other source?

And have you considered expanding the project to build both +3 and +2A manuals by switching in alternate chunks or some kind of diff?

[damieng]

A PR would be cool.

You have to install a specific markdown extension in VS Code and then "Print" the markdown to HTML then remove two small fragments relating to stuff it doesn't use. I'll put the process in the readme.

As for +2 manual... Is there any point? Its just a subset right? I don't have one as a reference.

[damieng]

Here's the experimental version of the Markdown All-In-One plugin I'm using from the author https://github.com/yzhang-gh/vscode-mar ... ssues/1232

If you don't want to install that just make a PR against the .md markdown file and I'll convert to HTML as part of the merge.

Thanks!

[1024MAK]

As for +2 manual... Is there any point? Its just a subset right? I don't have one as a reference.

There are:

• +2 Manual - for the ‘grey’ +2, 206 pages
• +2 Manual - for the ‘black’ +2A, +2B, 331 pages
• +3 Manual - 327 pages

I would post a photo, but I can’t at the moment

Mark