Ink on fingers! The history of printing (with code!)
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 34 | |
| Author | ||
| License | CC Attribution - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/38553 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
Bangbangcon (!!CON 2016)22 / 34
3
15
16
17
18
19
24
28
30
32
34
00:00
Machine codeComputer animation
00:11
Machine codeScripting languageMachine codeLink (knot theory)Software engineeringTwitterProcess (computing)LaptopSlide ruleJSONXMLComputer animationProgram flowchart
00:36
Machine codeText editorPRINCE2Text editorSoftware bugLetterpress printing
00:55
Form (programming)NeuroinformatikPunched cardVideoconferencingVirtual machineSource codeComputer animation
01:10
Virtual machineLetterpress printingNeuroinformatikTotal S.A.Computer animation
01:34
Letterpress printingHost Identity ProtocolFitness functionDigital photographyComputer animation
01:48
Multiplication signLetterpress printingComputer cluster
02:08
ComputerMultiplication signVirtual machineNeuroinformatikMachine code
02:45
Keyboard shortcutCASE <Informatik>Virtual machineMachine codeAsynchronous Transfer ModeComputer animation
03:01
Line (geometry)Sheaf (mathematics)Schmelze <Betrieb>Perturbation theory
03:12
RobotLine (geometry)ArmVirtual machineComputer animation
03:27
Virtual machineMereologyKey (cryptography)Distribution (mathematics)
03:45
Virtual machine19 (number)Computer animation
04:01
Computer animationMeeting/Interview
04:20
LogicPunched tapeMachine codeSheaf (mathematics)NeuroinformatikGreen's functionMonster groupCuboidFile archiverBlack box
04:42
ComputerLogicNeuroinformatikSemiconductor memoryPunched cardTape driveDigital photographyCore dumpoutputComputer animation
05:09
Virtual machineComputer fontMultiplicationComputer animation
05:23
Vapor barrierDivision (mathematics)Virtual machineDigital photographyComputer animationLecture/Conference
05:40
Division (mathematics)Line (geometry)Web pageText editorComputer animation
05:57
Software developerLatent heatFormal languageComputerComputer animationMeeting/Interview
06:11
User interfaceComputer programWave packetDigital photographyElectronic program guideBell and HowellMarkup languageElement (mathematics)Right angle
06:39
Uniqueness quantificationPunched tapeVirtual machinePhysical systemNeuroinformatikAdditionEndliche ModelltheorieDigital photographyBell and HowellComputer animation
07:15
VideoconferencingNeuroinformatikVideo gamePattern languageOcean currentComputer animation
07:49
Bell and HowellComputer-assisted translationWeb pageFormal languageTextsystemPhysical systemCore dumpCartesian coordinate systemProgramming languageExecution unitPattern languageLetterpress printingComputer animation
08:35
Physical systemComputerNeuroinformatikPhysical systemVirtual machineBell and HowellTextsystemUniqueness quantificationField (computer science)Computer animation
09:16
BitVirtual machineComputer animation
09:34
Function (mathematics)Sampling (statistics)Table (information)Machine codeNichtlineares GleichungssystemMathematics
09:51
Multiplication signProgramming languagePhysical systemNeuroinformatikFormal languageMereologyMeeting/Interview
10:17
Multiplication signPreprocessorDigital photographyVirtual machineMeeting/Interview
10:41
Digital photographyVirtual machineForm (programming)Computer animationDiagram
11:15
Virtual machineSoftwareMultiplication signLetterpress printingDigital photographyMachine codeLine (geometry)Bell and HowellComputer animation
11:50
Computer hardwareBell and HowellComputer chessProper mapProjective planeTerm (mathematics)Virtual machine
12:17
Line (geometry)Computer fontComputer chessWeb pageMereologyWikiEngineering drawing
12:46
Covering spaceDigital photography
13:02
Covering spaceFrequencyComputer fontPoint (geometry)Metric systemWeb 2.0SoftwareMultiplication signIntegrated development environmentNeuroinformatikTouchscreenNatural number
13:49
Multiplication signLetterpress printingNeuroinformatikElectric generatorSimilarity (geometry)Revision controlFlow separationEvent horizonOptical disc driveTouchscreenComputer animation
14:32
Computer chessPhysical systemMeta elementPower (physics)FreewareComputer animationProgram flowchart
Transcript: English(auto-generated)
00:21
Hi, my name is Mariko. This is my Twitter handle. I just tweeted the link to this slide, so if you wanna have it on your laptop, you can check that out. I'm a software engineer of JavaScript kind, and I organized Meetup Code Brooklyn JS in Brooklyn, month three. So this is my day job. I make a text editor, which was used by TV industry,
00:43
which, so for some reason, TV industry still has this need of printing out on paper. So I deal with a lot of bug about printing issues, and I hate print CSS. On my side, I'm also interested in punch card, an early form of computer. So this is the video of me making my own eight-bit
01:03
computer to data fit it by punch card, and including a textile that's get fitted into 80s computer code knitting machine. Anyway, so those two interests, so it's not only textile. I'm really interested in early mechanical computing, and that led me into typesetting machine.
01:22
I was thinking a lot about printing, and I was thinking a lot about my computer, and that led me to a thing called typesetting. Now, prior to this, and warning, this is total countless nights of just Googling stuff, but before doing this, in my mind, if I hear a letter plus or typesetting, I thought of things like this, like Hip Print Shop,
01:43
where you order your wedding invitation from, or the Gutenberg Bible, where the types are handpicked, and put it into flame one by one. And this was the way to print something on paper for a long time. But I deal with this now. We have this click of a button, magically,
02:03
beautifully formatted type comes out of the printer. So I was interested in what happens in between from here to there, especially the time when machines started, machine and computers started to influence our workflow, which led me to this machine called Linotype.
02:22
The why and how this was all indeed is quite interesting. I don't have time to fit into 10 minutes. I'm really sad, but in conclusion, this machine called Linotype was invented by German immigrant Ottmar Mergenthaler in 1886, and it is a way to help hand-by-hand typesetting
02:43
into semi-automated. So it has special keyboard, it's not quirky. The capital letter is on one side, and then lowercase lettering on the other side. And then on top of this machine has thing called magazine that contains a mold for type, metal mold for type.
03:00
So when you type on the keyboard, those mold fall down, including a line of, a set of mold, which now then gets sanded into molding section where hot molten metal shoots off and create a slab of type. And the machine creates a line of type, so it's called Linotype, that doesn't end here. It's quite interesting.
03:20
After this type is made, the mold needs to be redistributed back into a magazine again, so this giant robot arm comes down, glabs those metal molds, and then put it into a part of machine called de-distribution, where it kind of works like a key on your door, and each metal mold put it back
03:41
into each hole of the magazine. So it's quite fascinating. This was very level usual invention. The type industry and print industry used this exact machine for almost 100 years. So I mentioned this was invented in 1886. For example, New York Times,
04:01
up until 1978, they used Linotype to typeset their issue. So the last issue of New York Times that was hot metal typesetted was July 2nd, so it was technically, I guess, done in July 1st of 1978.
04:20
But you know, this was taken by thin code computer, and I actually took this from archival footage of a typographic union explaining the new technology that's coming, and this particular section is explaining, you know, you may think this computer thing that Green Monster eating paper tape inside a black box,
04:41
it's actually a clear box with a set of logic. It's interesting film to watch too. So I mentioned that the computer was introduced to the workflow of typesetting, but it was useful input. So instead of typing directly into typesetter, computer and memory and punch card tape was used,
05:02
but typesetter was still a separate thing, but it was new typesetter. It did not use metal type anymore. It is called phototypesetting. The metal type mold was replaced with a film with a front face on it, and the machine contained a lens so that it can enlarge.
05:20
So you don't have to buy multiple size of metal typeset to set a various size of type. So basically the machine photographs each letters and exposes it into contact paper, then develops it and spits out what's called cold type as opposed to hot metal type. Then this cold type is sent into layer division
05:41
and they cut and paste literally, and they draw a line literally to create a page. So this was, ladies and gentlemen, this was a WYSIWYG editor of 70s. So, workplace started looking like this,
06:01
you know, a bunch of computers under fluorescent light, and industry started to develop language and specification to typeset, so things like how to set a typeset, and here is the documentation of mockup for setting a typeface and the font size, and this is a training guide
06:20
of how you would use those mockup, and this is, you know, you can think of it as like a opening up dev tool and seeing the CSS for the each DOM element, but in paper. So this was quite exciting, right? And what's more exciting as a computer programmer is us, is that Bell Lab bought this photo typesetter
06:43
and used Unix to typeset on this machine. So the particular machine Bell Lab bought was Biographic Systems from Massachusetts, and the model could computer-assisted typesetter. This computer-assisted typesetter, even though it's a computer, it's not quite like directly coding into it.
07:02
It was still needed to use the film font, it was photo typesetter, but in addition to feeding the data from paper type, a paper tape, you could flick on a computer like PDP-11 to directly communicate with typesetter. And from yesterday, we all know that the hidden reason
07:23
that PDP-11 was bought in the Bell Lab was that Kenton Song wanted to play the video game, and some of you laughed at the fact that, you know, the Bell Lab authorized this, you know, quarter million, well, half million dollar in current currency expensive computer
07:41
for just because they wanted to typeset a pattern, but to me, it makes total logical sense. So I couldn't find a actual CAT typesetter, so this is just a book that Bell Lab published about document formatting and typesetting in Unix, but the Bell Lab's core interest was to research,
08:05
and as a research facility, they needed to publish research papers, and they need to patent those findings as a patent application. Now, as I mentioned, printing out, the idea of printing out something from printer was still a novel thing, so if you wanted to send it to typesetter
08:20
for proper typesetted paper, you would spend like $2 a page to typeset it, so trying to do that in-house on the language and system that they developed in-house totally makes sense. On top of that, the programming language community was quite excited about this new and exciting idea
08:40
of using computer to film a document. The word processing was literally the exciting field to explore in late 60s and early 70s, so things like Lanoff was developed for the Multics machine in MIT, and then gets imported into Unix, called Love, at Bell Lab,
09:02
but these systems are made for computers, so you could probably flick into dot matrix splinter to get an outcome out of it, but it was not specified for typesetting machine, and at Bell Lab, they ported the LOFF into specifically for typesetting machine,
09:21
called TLOFF, and T stands for typesetter, and I think yesterday's talk mentioned a little bit about that. So, now that they have this foundation of document typesetting specifically for typesetter, they created a few domain-specific reposesser, like Tubble, to create a table, and this is a sample output and a code,
09:42
and then something like EQN, which was used to typeset a math equations. The key person who worked on the Bell Lab is Brian Carnegie, who is known for the co-author of Programming Language Ock, but Brian was already interested in document system
10:01
prior joining the Bell Lab. He spent a time at MIT, and he was introduced to this idea of using computer to format document. So, the better part of 70s, he spent a lot of time on typesetting technologies, creating languages like EQN, and later created a preprocessor called PIC,
10:21
which was able to typeset a drawing. So, the phototypesetter was purchased in 72, and they used it until 78. So, after seven to eight years, it was time for upgrade, and Brian Carnegie led the team to find new typesetting machine, because new technology was being introduced
10:42
called a cathedrae tube. Looks like this. So, what was awesome is that with cathedrae tube, you can completely replace film font, and you can draw anything you want and directly photograph what was drawn on the CRT monitor or CRT to contact paper.
11:02
So, that meant that you can create your own font, and you can create emoji. So, you know, this is what was shown on the machine, on the cathedrae tube machine. So, the Brian Carnegie's team decided to purchase this machine called Linotron 202,
11:22
which ironically was the manufacturer which used to make a linotype machine, then evolved into creating a phototypesetter. The machine came with this piece of software, the linotype made, and to quote Brian Carnegie, it was completely unusable.
11:41
So, they were like, what do we do? We have this machine, and it prints beautiful, because, you know, it was made by print manufacturer, but the software is shit. At the time in Bell Lab, though, luckily, Ken Thompson and Joe Condon just wrapped up a project for Bell Chess Machine, and they were interested in publishing a book
12:02
about chess with proper chess font, or I would like to say chess emoji. And also, they were hardware people who understood how computing hardware worked. So, three of them got together, reverse engineered what was in the Linotron 202,
12:20
and created an internal memo of what they thought Linotron was doing, and here you can see, where'd it go, there it go, here you can see that they were describing what they think how Linotron is drawing a font, and then here is a chess font that they created with Linotron 202
12:40
after they reverse engineered it. But the coolest part of this paper is on talk page. So, the title of this memo is called Experience with Malgantala Linotron 202 Photo Typesetter, or How We Spent Our Summer Vacation, because they did it while Bell Lab
13:03
was on the summer vacation period. So, this was a short history, and a clamped together history of how typesetter came in play with our environment computer. So, hopefully, you now have answered to things like why is the largest font size in major software always 72 point?
13:22
Well, the font, the metal font that used to be made, the largest size was 72 point, and point doesn't make sense when you design on the web or the digital screen, but that was metrics that was used for actual physical paper. And when you think about something boring,
13:42
old type like Times New Roman or Helvetica, you can now think about it like, once somebody hand-curved that type, and that type survived similar generation of technological advance.
14:01
So, just like Jacquard Lune became early version of computer, what's on the computer also has a history tied into sometime before computer. So, hopefully, next time you sit in front of computer screen, or next time you click on the print button,
14:22
this talk may remind you of the artists and classmen who created and who worked on those things so that we can have nice things here. Thank you.