[HN Gopher] Hyperlinks in Handwriting
___________________________________________________________________
Hyperlinks in Handwriting
Author : nathell
Score : 165 points
Date : 2022-10-02 12:41 UTC (10 hours ago)
(HTM) web link (handwritten.blog)
(TXT) w3m dump (handwritten.blog)
| flobosg wrote:
| In a similar vein: https://www.jeffbridges.com/
| lemper wrote:
| personally, whenever I write, the pace of my writing dictates me
| to think slower and choose the wording to be short enough while
| keeping the intention clear.
| Zisko wrote:
| I clicked through to the transcript after reading the handwritten
| part and it felt like a punchline because of how readable it was!
| It would be nice if this were somehow a JS toggle but hidden on
| the same page to enable accessibility.
|
| I think the problem with doing something like this (besides
| accessibility) is you can never get the comfortable reading size
| right because the screen size/shape will never align with the
| flow of your text.
| nonoesp wrote:
| I'd go for the SVG format instead of rasterizing to PNG. It's
| going to be lighter and give you a similar crisp feeling.
|
| Have you tried passing the pages through a OCR transcription
| system like tesseract? You also get this with the text-parsing
| feature of the reMarkable 2 for free, and I was thinking you
| could use the [link title] syntax to mark links and have some
| sort of automatic mapping to the links so you don't have to
| specify the links "by hand."
|
| Anyhow, great idea. It's a bit small to read on iPhone.
|
| A cool idea would be to convert each word to an individual image
| and put each of them inside of an inline div to make the article
| responsive.
| cantSpellSober wrote:
| So for every edit, typo, etc, repeat steps 3-9 ( _and_ update the
| transcript)?!
| tacostakohashi wrote:
| https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...
|
| If it were me, I'd go for the <map> tag instead of fancy new CSS!
| LukeShu wrote:
| AFAICT, there's not a way to get those nice hover effects with
| a <map>, at least not without a bunch of JS.
| Groxx wrote:
| Yeah, my first thought was <map>, then I moused over it and
| noticed how utterly trivial this would be to re-style in
| comparison.
|
| This is a good approach, I think. It's kinda fine-tuned for
| reMarkable output, as it's mostly pure black or white pixels,
| but clearly they're fine with that. And the end result works
| quite well, and seems as easy or easier to implement.
|
| This is all also kinda made moot by there being a link to an
| _excellent_ transcript at the bottom. Accessibility needs are
| better covered by a straightforward alternate page than
| <map> alone.
| saghm wrote:
| Not sure if I triggered some sort of race with fast mouse
| movement or my mouse being over the link before it appeared
| or something, but for me on Firefox on Linux, the blue color
| went away when I hovered my mouse over a link. I'm not sure
| if that's really a benefit; it honestly confused me and made
| me think that I wasn't actually hovering over a link at
| first, since that's not how traditional links work.
| innocenat wrote:
| When I clicked the first link in the article, I though it was
| an image map too.
| dizhn wrote:
| I don't know if this is the same way image maps were made in
| the early 90s but that's what I immediately thought of too.
| ldjb wrote:
| <map> was introduced in HTML 3.2 in 1997. The other technique
| I often saw was to cut the image into a grid of separate
| image files. They would look to the user as if they were a
| single image, but you could hyperlink some of the images so
| the effect was that parts of the overall image were
| hyperlinked and some weren't. Developers came up with all
| kinds of interesting tricks in those days!
| yosito wrote:
| My first websites were built like this. I'd design PSDs and
| then slice them into images that I'd place in tables. I
| completely forgot about that approach!
| SquareWheel wrote:
| I had the same thought. I remember exporting image-based
| webpages in Macromedia Fireworks using HTML maps. No reason
| they shouldn't work today, even if they carry the same problems
| now as they did then (image-based websites are _massive_ ).
| cantSpellSober wrote:
| What IDEs have a GUI for creating image maps anymore? Last
| one I remember using was in Macromedia Dreamweaver.
|
| > image-based websites are massive
|
| With the huge gains we've made in image optimization since
| <map>s were popular this isn't _always_ true anymore.
| kevin_thibedeau wrote:
| That's more due to the huge gains in javascript bloat
| offsetting the cost of images.
| cantSpellSober wrote:
| No it's due to image optimization. 5 bloated apps can
| easily be smaller than 1 bad gif.
| notjustanymike wrote:
| Map is no good for SEO or WCAG though.
| tacostakohashi wrote:
| Are images of handwritten text good for that?
| cantSpellSober wrote:
| Maybe there's an opportunity here with on-the-fly OCR.
| Imagine if a screen reader could really _read_.
| eyelidlessness wrote:
| I have to imagine some can, as the article mentions on
| the fly OCR of handwriting to generate the transcription,
| and I can select text from the handwriting on my phone
| (iOS 15 currently).
|
| I was initially surprised to see it's not transparent
| text overlaying the image, but apparently the text
| recognition is actually that good.
| yellow_postit wrote:
| On the fly for each end user loading seems wasteful, why
| reprocess each time?
| jahewson wrote:
| Safari already has this.
| cantSpellSober wrote:
| Safari has Live Text; that's just Google Lens with less
| features
| easrng wrote:
| No, they aren't.
| cantSpellSober wrote:
| <map> and <area> are fine for a11y if marked up responsibly
| (they accept ARIA attrs and alternative text for example). I
| learned Amazon still uses them regularly!
| danielvaughn wrote:
| That's interesting, do you know what Amazon uses them for?
| cantSpellSober wrote:
| I've seen them in promotional carousels. One large bg
| image, each individual product is it's own <area>
| perihelions wrote:
| Oh, that's not that I thought the title meant!
|
| Imagine if you could hyperlink as you handwrote notes, fluidly
| with the motion or gesture of the pen. As with text editors like
| emacs or *vim, you'd create new modes of thinking as you interact
| with a machine at the speed of thought, with the underpinning
| physical motions being too fast and too easy for conscious
| attention. Make wormholes from one part of the writing surface to
| a distant one, recording connections, asides, without conscious
| effort. No more than you expend on the shapes of letters, or the
| layout of QWERTY.
|
| Instead, we're kind of stuck on the UX of "ordered sequence of
| rectangles", with some usability hacks to mitigate the severe
| limitations of this skeuomorphism.
|
| Surely there must be some astounding low-hanging fruit here, in
| the UX of epaper handwriting as a tool of exploratory thought.
| sanshugoel wrote:
| Something similar is being carried out by team at Muse..
| https://museapp.com/memos/2022-09-linked-cards/
| [deleted]
| akkartik wrote:
| My sense is that the design goal of Zettelkasten is basically
| this. Why note cards? Why only a few sentences per card? So you
| can insert text in a fine-grained manner -- and so you can
| insert cross-links in a fine-grained manner.
| jonwest wrote:
| It would be cool if there were a gesture for this within
| Remarkable, like if you underline a word and draw a line to
| another word or it pulls up a table of contents you could point
| to, then when you finish the line, your "link line" would
| disappear leaving only the underline.
| bee_rider wrote:
| That's a neat idea. I was hoping the author would share an
| interesting strategy for linking to external documents inside
| a handwritten post. But I don't see any way it could be much
| more elegant that "I just wrote the URL down manually and
| linked the text to it," which is what they did. But linking
| to points inside the document, you could get pretty clever.
| psychomugs wrote:
| My current note-taking stack is an Obsidian Vault on my iPad
| with the mazec handwriting keyboard [1] (this post was written
| with it), occasionally switching to Nebo [2] if I want a long-
| form writing experience. Apple's built-in scribble
| functionality would be great if it weren't so inaccurate and
| kludgy when correcting mistakes. I won't wax poetic about
| Obsidian more than others already have, but this setup gets me
| very close to the link-as-you-write workflow that I sorely
| wished I had in grad school.
|
| [1] https://apps.apple.com/us/app/mazec/id943711253
|
| [2] https://www.nebo.app/
| _visgean wrote:
| I have been playing lately with source code of
| https://www.tldraw.com/ to do something similar - allow writing
| of blogs / websites completely on ipad. I managed to insert links
| into the SVGs that were clickable...
|
| My thinking was to allow people to doodle / made little comics on
| the web. Right now artsy people are confined to exporting to pngs
| and including it as image.. I was thinking somebody should just
| grab ipad and start drawing. If they want to write a text they
| should be able to do with pen, keyboard or voice transcription...
| zeta0134 wrote:
| On my monitor I found the text very difficult to read in giant
| print, so I tried to zoom out to make it smaller... and was
| somewhat disappointed to find that the text countered that zoom
| and remained the same size. This is an accessibility problem;
| many folks will need the inverse. Please don't do this.
|
| (If you're in the same boat as a user, you can work around the
| issue by resizing the browser window. Well, you can on PC, I'm
| not sure that's possible on a tablet.)
| caxco93 wrote:
| I opened this on iPhone with Safari and you can actually select
| the text and copy paste
| cantSpellSober wrote:
| Can't select in normal browsers.
|
| I remember when whiteboard coding interviews still existed, I
| was shocked to find someone actually writing code by hand _on
| purpose_.
| mlajtos wrote:
| Haha, coding with pencil on paper (but modern) is actually
| pretty awesome: https://mlajtos.mu/posts/new-kind-of-paper
| neon_electro wrote:
| But even then it appears to be a different OCR process than
| what the author intended; spelling mistakes and text to speech
| errors abound. Not accessible.
| petepete wrote:
| <img src="xyz" alt="Handwritten post">
|
| Thanks for the info!
|
| I'm with the author in that this is a nifty trick, similar in
| some way to the map element (https://developer.mozilla.org/en-
| US/docs/Web/HTML/Element/ma...), but it's one of the least
| accessible web pages I've ever seen.
| wongarsu wrote:
| I find the screen reader experience of
|
| - image: handwritten.blog
|
| - image: handwritten post
|
| - link (image): comment on this post
|
| - link (image): read the transcript of this post
|
| - link (image): back to main page
|
| not bad at all. Sure, it would be better if the transcript was
| just part of the page, but I understand the tradeoff and it's
| quick enough to get to the transcript.
| petepete wrote:
| I didn't even notice the transcript text down there! That's
| better but still far from ideal.
| 1-more wrote:
| He could do an aria-describedby pointing to the link and it'd
| be a fair bit better.
| mlajtos wrote:
| The trick with overlaying colorful rectangle on top of
| handwritten glyphs is the same thing I did for New Kind of Paper
| [0]. Apple PencilKit has this weird behavior that when you change
| color of some stroke, the canvas freezes for some time and the
| experience is horrible. Overlaying SwiftUI rectangles on top is
| the easiest way.
|
| [0] https://mlajtos.mu/posts/new-kind-of-paper
| kkarpkkarp wrote:
| I like how sarcastic it is that link to this completely
| inaccessible post written as PNG image is at HN just next to the
| link to Bogota's gov page which has a sign language titles :)
| kixiQu wrote:
| There is a link to the transcript, and the link has alt text
| indicating what it is.
| cantSpellSober wrote:
| Why bother with subtitles when I have a copy of the
| screenplay right here?
| account-5 wrote:
| Did you mean ironic?
| sinistersnare wrote:
| Another blog with handwritten posts is [1]... This person also is
| an Emacs contributor, and writes the blog with a Supernote ([2]),
| not a Remarkable.
|
| [1]: https://sachachua.com/blog/2022/09/monthly-review-
| august-202... [2]: https://supernote.com/
| cantSpellSober wrote:
| Every <a> is empty! No text at all! This site is barely usable
| let alone accessible.
| chazeon wrote:
| I realize you could click the "view transcript" at the bottom
| of the page to get accessibility.
| cantSpellSober wrote:
| A leftover from a bygone era, kind of like "click here to
| view the Netscape version of this page!"
|
| The transcript appears to only have 7 steps, there are _9_ on
| this page...so _is_ it a transcript?
| jwilk wrote:
| I see 7 steps on both pages.
| layer8 wrote:
| Unfortunately the site doesn't support Safari Reader mode.
| sinistersnare wrote:
| Interestingly, the transcript linked at the bottom of the page
| does not active my FF android reader mode either. However, that
| page _is" quite readable.
| layer8 wrote:
| I hadn't noticed there was a transcript, thanks. The
| transcript page does support Safari Reader mode. I _think_
| that Reader mode could also be supported on the main page,
| given that highlighting and copying text is possible there.
| e-clinton wrote:
| Everything that's old is new again. Reminds me of using Frontpage
| in the 90s.
| thrown_22 wrote:
| I'm reminded of Dijkstra's notes but with hyperlinks.
|
| It unfortunate that the OP didn't turn their writing into SVG,
| and it's somewhat stunning that turning a webpage into a PNG
| with a ridiculous resolution results in a _smaller_ webpage
| size than most webpages with similar functionality today.
|
| The new web: forget HTML, use PNG. \s
| avgcorrection wrote:
| There's always a twist. Now you get to do the old things with
| an expensive gadget.
| jiggyjace wrote:
| I was hoping this would be an innovative way to write hyperlinks
| kind of what bit.ly or QR codes do and then you just point a
| camera at what you drew and it will go to it.
| almostarockstar wrote:
| Ah now I'm not going to stop thinking about this all evening.
| pbhjpbhj wrote:
| You could do this with a standard marker (like the corner parts
| of a QR code) on a piece of transparent adhesive plastic,
| paired with a database. Turn anything into a QR code.
|
| In theory you could do it without the plastic sticker on the
| lookup side, but it seems like you'd use far more resources
| with little gain (principle gain being you only need one
| transparent marker; principle loss, you have to search every
| image for every "marker code" ever created across every part of
| the image).
| graftak wrote:
| Just write the url and a camera--on iOS at least--will find it
| and make it clickable.
| g105b wrote:
| I'm curious, if you write with pen and paper, does it look the
| same as how the remarkable 2 renders it? I returned my RM2
| because it make my handwriting look wobbly and difficult to read.
| Now I've returned to paper, but now it's more effort to OCR.
| ildon wrote:
| Alternative idea: convert the file imported from remarkable to
| vector images (SVG) and enclose the hyperlinks in <a> tags
| levesque wrote:
| This webpage is an accessibility nightmare. Can't even zoom out.
| wongarsu wrote:
| Zooming is a bit hit-and-miss (works great in Firefox, not at
| all in Edge). But I just tried it with a screen reader and that
| experience is great: every image has alt tags, the link to the
| transcript is about the fourth element, and the transcript is
| beautiful semantic HTML that the screen reader can easily makes
| sense of.
| psytrx wrote:
| > on this blog, I want to thoughtfully embrace imperfection.
|
| Jokes aside, yes it is a nightmare. However, you can find a
| transcript at the bottom of the page, which makes it a little
| more readable.
| devonnull wrote:
| That's a lot of work for I don't know how much gain. And, more
| importantly, I have to agree with a number of posters here that
| page (and anything like it) is an accessibility nightmare.
| personjerry wrote:
| Maybe just try using this service instead?
| https://paperwebsite.com/
| chrismorgan wrote:
| The goal here is to present the content in hand-written form.
| That service is just OCRing and discarding the handwriting
| medium, which is not at all what's wanted.
| jawns wrote:
| I created a handwritten blog back in 2005, then discovered that
| there was a Flickr group devoted to handwritten blogs:
| https://www.flickr.com/groups/handwrittenblogs
|
| It looks like that group is pretty much frozen in 2005-2006, and
| it's really interesting to see how these blogs were handled back
| then.
|
| The domain on which I hosted my blog is no longer active, but
| I've still got all the source code, and it's fun to look back on
| it as an experiment.
|
| For me, the hardest part was the SEO. I ended up transcribing my
| handwriting as much as I could, then had the images cover the
| text.
| worldmerge wrote:
| Could you put the text in the alt text? I was kinda hoping this
| was using a handwriting font.
| wongarsu wrote:
| There's a link to the transcript at the bottom.
| cantSpellSober wrote:
| Goes against the idea that all users should have "full and
| equal enjoyment" of a site instead of a "separate but equal"
| version just for "them."
| kixiQu wrote:
| Is that really a goal of accessibility, though? Are image
| descriptions not "separate"? If this is not enough, should
| no one have any images on the web at all?
|
| I don't think we should discourage people from setting up
| systems that have this kind of accessibility, even if it's
| not as "pure" from the perspective of duplicated content.
| cantSpellSober wrote:
| Yes, it's an explicit goal of accessibility, and predates
| the web
| thrown_22 wrote:
| So how did we encode smells for the noseless before the
| web?
| cantSpellSober wrote:
| Losing our sense of smell is actually somewhat dangerous
| and more common than you think (can be lost temporarily
| due to illness).
|
| So we install smoke detectors and put expiration dates on
| things to detect danger without smell.
| thrown_22 wrote:
| Yeah but how do you encode the smell of a rose to someone
| without a nose? You're being incredibly discriminatory by
| only giving the smelless a warning and nothing else.
| csande17 wrote:
| Indeed, the Web Content Accessibility Guidelines
| explicitly allow creating a separate accessible version
| of content and linking to it. They call it a "conforming
| alternate version": https://www.w3.org/TR/2016/NOTE-
| WCAG20-TECHS-20161007/G190
|
| (The guidelines say it's preferred for everything to
| conform directly, but they use "artistic integrity" as an
| example of a situation where a conforming alternate
| version could be used. I'd say that applies here.)
| thrown_22 wrote:
| Yes and?
| zichy wrote:
| Even then it would not really be accessible. Alternative texts
| are just text blobs without any semantics and are read by
| screenreaders without any interruption.
| zaps wrote:
| This site should be part of the marketing demos for the
| iPhone/iOS.
|
| Without any effort on my part, the system recognizes
| _handwriting_ inside an _image_ and lets me copy /paste it like I
| was working with standard text.
|
| It's 100% seamless and feels magical.
| politelemon wrote:
| Not sure why this would be a demo specifically for Ios, Android
| has been doing this for a few years now.
| dsr_ wrote:
| If this works for them, fine. It would be weird if everyone liked
| the same workflows. But for me, every extra step reduces my
| likelihood to write something.
|
| Right now, it's three steps:
|
| > make newpost NAME='name of this post'
|
| [edit the skeleton until it has what I want in it]
|
| > make rsync
|
| I still don't write as often as I think about it.
| chrismorgan wrote:
| I've been toying with basically the same concepts. It's fun.
|
| My preference has been to use SVG for the links (independent of
| whether the strokes are done raster or SVG). It's not
| _fundamentally_ any more expressive, but it's much more
| convenient for a number of techniques like adding background
| colour or link underlines (I found changing only text colour with
| mix-blend-mode unsatisfactory), and links that span a line break.
|
| Here's a snapshot of roughly where I last left this a few months
| ago. (I've had to substitute in an inferior document, as I was
| working with a lined-paper prose document that I'm not willing to
| share at this time. It works better with that type of content.)
| You can see that I've leaned into the pagination, styling it more
| paperily, and also that there's a fairly significant overload of
| SVG filters which tend to _ruin_ performance. I'll pare that down
| significantly if I go ahead with it. (Still keeping some of the
| page-edge and maybe link shape roughness, but with a simpler
| paper texture.)
|
| https://temp.chrismorgan.info/2022-10-03-hand-drawn-with-lin...
| (almost 800KB because the pen uses a variable-width stroke and my
| SVG generation for that isn't particularly optimised because I've
| skimped on some of the fancier trigonometry involved--but I
| should note that it's _much_ more accurate than the "lots of
| short line segments" approach used by every existing .rm-to-.svg
| library I found).
|
| Also if I go ahead with this, I'll use the colour support that
| came in version 2.13 of the reMarkable system software, drawing
| my hyperlinks in blue from the start and reserving some
| highlighter colour if I want the background shading. Using
| distinct colours like this will make identifying and marking up
| links mechanically straightforward (since all the strokes in a
| given layer appear in draw order), leaving only the entry of the
| URL.
|
| --***--
|
| One other thing about the presentation on this site: the image
| scales to the viewport width, which is very, very not good: it
| means that regular desktop-style zoom (most importantly zoom
| _out_ ) just doesn't work. The most common desktop screen sizes
| are getting the equivalent of a body font-size in excess of 50px
| (three times what is generally reasonable). You should add
| something like `.post { width: 40em }` which fixes the problem
| without causing any other trouble.
| bmacho wrote:
| On a side note, I think I'd prefer footnote links in handwriting
| instead of blue inked words.
| jdthedisciple wrote:
| tangentially related, but wow this is eerie: 2 days ago, I
| randomly thought about starting a blog that uses only my
| handwriting for everything and how unique that would be. And here
| we go ...
| mgaunard wrote:
| Why is this person handwriting in print instead of cursive?
|
| Is it what society has come to?
| asciimov wrote:
| Yes, but we all have typewriters in our pocket these days.
| scbrg wrote:
| > Why is this person handwriting in print instead of cursive?
|
| Perhaps they want it to be readable? :-)
|
| > Is it what society has come to?
|
| Thankfully, yes.
| Macha wrote:
| I gave up handwriting in cursive in my late high school days as
| it was substantially more readable for both myself and for the
| teachers who had to grade my work. It's not uncommon, I think
| print had a good 30% share by the end of it.
|
| As for my coworker's notes these days, I'd say print has a
| majority even, but in these days most people use computer
| documents instead of handwritten anyway.
| avgcorrection wrote:
| I pretty much _had to_ do the same in high school because
| apparently it was unreadable to them (not to me though...)
| kixiQu wrote:
| There is a technological reason!
|
| https://www.theatlantic.com/technology/archive/2015/08/ballp...
| mgaunard wrote:
| In my country, kids are required to use fountain pens.
| hughes wrote:
| Did it hinder communication in any way? Were you unable to
| understand what was written?
| bmacho wrote:
| Why not?
___________________________________________________________________
(page generated 2022-10-02 23:00 UTC)