Variable Width Fonts - Githubissues

Miserlou / Glance-Bookmarklet

A Speed Reading Bookmarklet

https://gun.io/blog/openspritz-a-free-speed-reading-bookmarklet

MIT License

1.56k stars 249 forks source link

Variable Width Fonts #65

Open Miserlou opened 10 years ago

Miserlou commented 10 years ago

So, here's a challenge.

OpenSpritz currently relies on fixed width monospace fonts for text centering to get the pivot letter aligned properly. Somebody emailed me an asked about using variable width fonts, got me thinking. The way Spritz proper does it is with a canvas, but I think there could actually be an easier solution.

Rather than having a single, text-centered display area, we could have two different text areas, one left aligned and one right aligned.

So rather than having a center-aligned

......Geronimo..

We would have a right-aligned

Ger

and a left-aligned

onimo.

Does that make sense? Needs experimentation.

0xE282B0 commented 10 years ago

Sounds like a good idea. I would like to change the font size or the font, too. I haven't tried your approach but there could be a problem with the width of the pivot letter. If that not work we can try to measure the width of the char and calculate the right position.

TheSavior commented 10 years ago

I'm not sure that really solves the variable width font. If the word is

mmmmlllllll

and we pivot on the last m, then the left group would be the Ms, the right group would be the Ls, and it wouldn't be fixed. I do like the solution of having two divs aligned opposite instead of adding a nbsp, but I'm not quite sure how it solves the problem you mention.

0xE282B0 commented 10 years ago

My suggestion would look like this: http://jsbin.com/jeqekeko/2/edit

Miserlou commented 10 years ago

Hmmmmmm, interesting!

A good show!

There is a very slight difference in the pivot location between the word with the capital G and the and the one with the capital H, but I think it might be sub-perceptual. Good stuff though.

On Tue, Mar 11, 2014 at 1:44 AM, smielke notifications@github.com wrote:

My suggestion would look like this: http://jsbin.com/jeqekeko/2/edit

Reply to this email directly or view it on GitHubhttps://github.com/Miserlou/OpenSpritz/issues/65#issuecomment-37273693 .

0xE282B0 commented 10 years ago

Yes, you're right. There is a difference in the location. It is better when I add 1px to offsetWidth value. But I think the formula needs some fine tuning. Are you using a Crome Browser? It looks like Chrome has problems to handle 0.5px values.

benhen commented 10 years ago

It's no html-bending trick, but here is a canvas-based thing that works with adjustable font and properly aligns text, whatever the font-spacedness: http://jsbin.com/canvasspritz/14

TheSavior commented 10 years ago

FWIW, canvas does properly render at 60fps quite smoothly on mobile devices as well...

kukulski commented 10 years ago

https://github.com/kukulski/readifry implements two methods that work for variable-width fonts

the two-block method (which breaks kerning, but has a rock-solid position for the pivot character)
and a measurement-based method, which drops the idea of a pivot character altogether.

A third method could combine the two at the expense of making additional measurements -- a fractional "pivot" (I'd been calling it asymmetrical centering) would be calculated from the measured length of the word fragment, and then rounded to match the position of an individual character.