Receipt Printer

Output that arrives as a physical process, for the places a product hands something over: an order confirmation, an AI answer printed line by line, a log, a checkout summary, a ticket. Everything printed is real text in the page, announced politely as it prints; Feed and Tear are buttons, and the paper can also be torn by dragging it down. A plain, small API (print, feed, tear, clear) with events for each line, for the end of a job and for the tear.

Copy the printer folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="printer/printer.css">
<div id="printer" style="width: min(92vw, 460px); height: 640px"></div>

<script type="module">
  import Printer from './printer/printer.mjs';

  const printer = new Printer(document.getElementById('printer'), {
    text: '',
    width: 32,
    speed: 9,
  });

  // printer.update({ … });   change any option in place
  // printer.destroy();        and take it away again
</script>

new Printer(element, options)

Builds it inside the element with these options.

length

Rows of paper on the current sheet.

busy

Whether the paper is moving or lines are waiting.

print(input, opts = {})

Print text or a list of lines.

feed(n = 1)

Feed n blank lines.

tear(how = {})

Tear the paper off along the bar.

clear()

Take all the paper away, at once, and drop what is waiting to print.

update(opts = {})

Change options in place.

destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: print, done, empty, tear.

1. IdleThe lamp is green; nothing moves; the paper stays where it is.
2. PrintingThe lamp is amber. Each line steps out a pixel row at a time, its ink coming with it, then the head rests for the rest of the beat; a long line takes a little longer, a rule or a blank half a beat.
3. CurlingThe paper bends toward you, more the further it hangs from the slot; the rows are hinged edge to edge and the curled end catches the lamp.
4. TearingBy the Tear key, a call, or a drag down past the resistance: a tug, a rip along the teeth, and the strip falls turning; its top edge is the bar's zigzag and a fresh sheet is already in the slot.
5. Auto cutPast the paper length the printer cuts the strip itself and printing goes on.
6. Out of paperWhen the roll's lines are used up the lamp goes red and printing waits; set a new roll and it goes on.
7. FeedingThe Feed key feeds two lines; held, it keeps feeding.
8. Thermal and recycledWarm off-white stock with a faint fibre grain and the head's dot grid, or greyer flecked recycled stock.
9. AluminiumA bead-blasted case, steel bar and lit legends.
10. GraphiteA soft-touch black case and a blackened bar.
11. SoundOptional: a soft whirr for each line, a tick for each key, a rip for the tear. Off by default and only after the page has been touched.
12. Off screen or hiddenThe queue holds and nothing runs.
13. Reduced motionText appears whole with no feeding; a tear removes the strip; no sound.

Made of: Line by line head, Stepper paper feed, Hinged row curl, Serrated tear clip, Gravity strip drop, Uneven thermal ink, Room fixed sheen, Sleeping loop.

Original. The paper is DOM and CSS: each printed line is a row of real text in a plane hinged to the one above, so the curl is a bend of the whole strip in perspective and the text stays selectable and readable. The tear bar and the torn edge share one zigzag polygon computed from the width.

• 18.1DispatchA contact section made as a desk unit.