29:null 2a:["$","title",null,{"children":"Text Measurement in the browser | Fabian Gündel | Observable"}] 2f:T1836,viewof text = { const textarea = html`

Hey, brother, what you thinking?
Leave that old record spinning
You feel the rhythm, going
(They call it lonely digging)
Let's end your time to lay low
Your knees a-bending, so
It's time to get up and let go
(You're gonna come undone)
Hey, mama, how's it going?
Can't see your body moving
Don't leave the party dying
(They call it lonely digging)
Your booty shaking, you know
Your head has no right to say no
Tonight it's ready, set, go
Baby can you move it round the rhythm
So we can get with 'em
To the ground and get us a rock and roll round
Just a downtown body body coming with a super-hottie
Let's go, yes, no, hell no
Baby can you move it round the rhythm
'Cause you know we're living in the fast lane, speed up
It ain't no game, just turn up all the beams when I come up on the scene
Hey, brother, what you thinking?
That good ol' sound is ringing
They don't know what they're missing
(They call it lonely digging)
Let's end your time to lay low
Your knees a-bending, so
It's time to get up and let go
Hey, brother, nice and steady
Put down your drink, you ready
It's hard when things get messy
(They call it lonely digging)
Your booty shaking, you know
Your head has no right to say no
Tonight it's ready, set, go
Baby can you move it round the rhythm
So we can get with 'em
To the ground and get us a rock and roll round
Just a downtown body body coming with a super-hottie
Let's go, yes, no, hell no
Baby can you move it round the rhythm
'Cause you know we're living in the fast lane, speed up
It ain't no game, just turn up all the beams when I come up on the scene
Baby can you move it round the rhythm
So we can get with 'em
To the ground and get us a rock and roll round
Just a downtown body body coming with a super-hottie
Let's go, yes, no, hell no
Baby can you move it round the rhythm
'Cause you know we're living in the fast lane, speed up
It ain't no game, just turn up all the beams when I come up on the scene
He said the way my blue eyes shined
Put those Georgia stars to shame that night
I said, "That's a lie"
Just a boy in a Chevy truck
That had a tendency of gettin' stuck
On back roads at night
And I was right there beside him all summer long
And then the time we woke up to find that summer gone

But when you think Tim McGraw
I hope you think my favorite song
The one we danced to all night long
The moon like a spotlight on the lake
When you think happiness
I hope you think that little black dress
Think of my head on your chest
And my old faded blue jeans
When you think Tim McGraw
I hope you think of me

September saw a month of tears
And thankin' God that you weren't here
To see me like that
But in a box beneath my bed
Is a letter that you never read
From three summers back
It's hard not to find it all a little bitter sweet
And lookin' back on all of that, it's nice to believe

When you think Tim McGraw
I hope you think my favorite song
The one we danced to all night long
The moon like a spotlight on the lake
When you think happiness
I hope you think that little black dress
Think of my head on your chest
And my old faded blue jeans
When you think Tim McGraw
I hope you think of me

And I'm back for the first time since then
I'm standin' on your street
And there's a letter left on your doorstep
And the first thing that you'll read is:

When you think Tim McGraw
I hope you think my favorite song
Someday you'll turn your radio on
I hope it takes you back to that place
When you think happiness
I hope you think that little black dress
Think of my head on your chest
And my old faded blue jeans
When you think Tim McGraw
I hope you think of me

Oh, think of me
Mmmm

He said the way my blue eyes shined
Put those Georgia stars to shame that night
I said, "That's a lie"

Ground Control to Major Tom
Ground Control to Major Tom
Take your protein pills and put your helmet on

Ground Control to Major Tom
Commencing countdown, engines on
Check ignition and may God's love be with you

Ten, Nine, Eight, Seven, Six, Five, Four, Three, Two, One, Lift off

This is Ground Control to Major Tom
You've really made the grade
And the papers want to know whose shirts you wear
Now it's time to leave the capsule if you dare

This is Major Tom to Ground Control
I'm stepping through the door
And I'm floating in a most peculiar way
And the stars look very different today

For here
Am I sitting in a tin can
Far above the world
Planet Earth is blue
And there's nothing I can do

Though I'm past one hundred thousand miles
I'm feeling very still
And I think my spaceship knows which way to go
Tell my wife I love her very much she knows

Ground Control to Major Tom
Your circuit's dead, there's something wrong
Can you hear me, Major Tom?
Can you hear me, Major Tom?
Can you hear me, Major Tom?
Can you...

Here am I floating round my tin can
Far above the Moon
Planet Earth is blue
And there's nothing I can do

When they kick at your front door
How you gonna come?
With your hands on your head
Or on the trigger of your gun
When the law break in
How you gonna go?
Shot down on the pavement
Or waiting on death row
You can crush us
You can bruise us
But you'll have to answer to
Oh, the guns of Brixton
The money feels good
And your life you like it well
But surely your time will come
As in heaven, as in hell
You see, he feels like Ivan
Born under the Brixton sun
His game is called survivin'
At the end of the harder they come
You know it means no mercy
They caught him with a gun
No need for the Black Maria
Goodbye to the Brixton sun
You can crush us
You can bruise us
But you'll have to answer to
But oh-the guns of Brixton
When they kick at your front door
How you gonna come?
With your hands on your head
Or on the trigger of your gun
You can crush us
You can bruise us
Yes, even shoot us
But oh-the guns of Brixton
Shot down on the pavement
Waiting in death row
His game is called survivin'
As in heaven as in hell
You can crush us
You can bruise us
But you'll have to answer to
Oh, the guns of Brixton
Oh, the guns of Brixton
Oh, the guns of Brixton
Oh, the guns of Brixton

` textarea.style.width = '100%' textarea.style.height = '100px' textarea.style.font = font yield textarea }30:T452,html`

${data.map((line, i) => ` `)}

DOM `getBoundingClientRect` ${dom.reduce((acc, d) => acc + d[2], 0)}ms	SVG `getComputedTextLength` ${svg.reduce((acc, d) => acc + d[2], 0)}ms	CANVAS `measureText` ${canvas.reduce((acc, d) => acc + d[2], 0)}ms	Line ${data.length} lines measured
${dom[i][0].toFixed(6)}px ${dom[i][2]}ms	${svg[i][0].toFixed(6)}px ${svg[i][2]}ms	${canvas[i][0].toFixed(6)}px ${canvas[i][2]}ms	${line}

`31:[] 2d:{"id":"34d06df6f340e89f","slug":"text-measurement-in-the-browser","title":"Text Measurement in the browser","thumbnail":"a6c112c262bc511c02cdbe40e7ffffd161b30bb86cb6ea5c3254b9e3cc59750c","access_level":"public","create_time":"$D2018-10-15T15:07:23.450Z","update_time":"$D2018-10-28T16:28:59.051Z","view_time":null,"first_public_time":"$D2018-10-15T16:26:59.386Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"40fc243da291ec86","login":"sto3psl","name":"Fabian Gündel","avatar_url":"https://avatars-next.observableusercontent.com/389bce2d61aebba762252043b015af9ec5702eefde81634e9db5c593934b7b0e","tier":"starter_2024"},"version":315,"publish_version":315,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7d44ebfc09fccc5","login":"sto3psl","name":"Fabian Gündel","avatar_url":"https://avatars-next.observableusercontent.com/389bce2d61aebba762252043b015af9ec5702eefde81634e9db5c593934b7b0e","tier":null}],"members":[{"type":"individual","id":"c7d44ebfc09fccc5","login":"sto3psl","name":"Fabian Gündel","avatar_url":"https://avatars-next.observableusercontent.com/389bce2d61aebba762252043b015af9ec5702eefde81634e9db5c593934b7b0e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Text Measurement in the browser","cells":[{"id":0,"value":"md`# Text Measurement in the browser\n\nThis notebook visualizes differences in some text measurement APIs of the browser.\nRed lines in the table mean that 1 of the 3 APIs returned a different value than the others.\n\n**Some browsers have to load the font Roboto first and the calculation happens with a different font. Just type something into the font input and the table will update.** \n\nThe time displayed shows how long it took to render a specific line of text and the table head displays the time it took to measure all lines with the specified method. To measure I use \\`performance.now()\\`, which has reduced accuracy in Safari and Firefox, because of exploits like [Spectre](https://spectreattack.com/). In Firefox there is a flag to increase accuracy. It's called \\`privacy.reduceTimerPrecision\\` and you can set it to \\`false\\` to get high resolution time stamps in Firefox. **Please don't leave it on \\`false\\` after running this!**\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof font = {\n const input = html``\n input.style.font = input.value\n yield input\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"md`\n### Measurement precision\n\n

\n${await vegalite({\n width: '800',\n height: '100',\ndata:{values: mixed},\n mark: {\"type\": \"point\", \"filled\": true},\n encoding:{\n y:{type:'quantitative',field:\"deviation\"},\n x:{type:'nominal',field:\"line\"},\n size: { type: 'quantitative', field: 'speed'},\n color: { type: 'nominal', field: 'name'}\n }\n})\n}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`\n### Speed\n\nThis data is the most accurate in Chrome.\n\n

\n${await vegalite({\n width: '800',\n height: '100',\ndata:{values: mixed},\n mark: {\"type\": \"point\", \"filled\": true},\n encoding:{\n y:{type:'quantitative',field:\"speed\"},\n x:{type:'nominal',field:\"line\"},\n color: { type: 'nominal', field: 'name'}\n }\n})\n}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"data = _.uniq(text.split('\\n').filter(Boolean))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"svgMeasure = {\n const svg = html``\n svg.style.font = font\n svg.style.display = 'inline-block'\n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"domMeasure = {\n const span = html`lol`\n span.style.font = font\n span.style.wordWrap = 'none'\n return span\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"dom = data.map(line => {\n const t0 = performance.now() \n domMeasure.innerText = line\n const width = domMeasure.getBoundingClientRect().width\n const t1 = performance.now()\n return [width, line, t1 - t0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"svg = data.map(line => {\n const t0 = performance.now()\n const text = svgMeasure.querySelector('text')\n text.textContent = line\n const width = text.getComputedTextLength()\n const t1 = performance.now()\n return [width, line, t1 - t0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"canvas = {\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')\n ctx.font = font\n return data.map(line => {\n const t0 = performance.now()\n const width = ctx.measureText(line).width \n const t1 = performance.now()\n return [width, line, t1 - t0]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"mixed = {\n return data.reduce((acc, d, i) => {\n const avg = (dom[i][0] + svg[i][0] + canvas[i][0]) / 3\n return acc.concat([\n { line: d.slice(0, 10), length: dom[i][0], speed: dom[i][2], deviation: Math.abs(avg - dom[i][0]), name: 'dom' },\n { line: d.slice(0, 10), length: svg[i][0], speed: svg[i][2], deviation: Math.abs(avg - svg[i][0]), name: 'svg' },\n { line: d.slice(0, 10), length: canvas[i][0], speed: canvas[i][2], deviation: Math.abs(avg - canvas[i][0]), name: 'canvas' }\n ])\n }, [])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"