The only problem is that it sounds robotic. It has the same vocal fidelity as a 1980s Speak 'n' Spell toy. Monotonous, clipped, and painful to listen to. For some people, this is a feature, not a bug. I have blind friends who are so used to eSpeak that they can crank it up to hundreds of words per minute and navigate through complex documents with ease.

For the rest of us, it is a steep and unpleasant learning curve.

There are lots of modern TTS programs using all sorts of advanced AI. Many of them are paywalled or require you to post your text to a webserver - with all the privacy and latency problems that causes. Some are restricted to high-powered GPUs or other expensive equipment.

Piper is different. It is local first, runs quickly on modest hardware, and is open source.

The easiest way to install it on Linux is to use Pied - a simple GUI which allows you to select languages, listen to accents, and then install them.

It will change your speech-dispatcher to use the new Piper voice. That means it is immediately available to your Linux DE's accessibility service and to apps like Firefox.

I now have a reassuring Scottish lady speaking out everything on my computer.

While perusing the programme on the National Theatre website I stumbled upon a little bug. The incredible Ronkẹ Adékọluẹ́jọ́ has her name rendered in a most unusual style:

It rendered just fine in Chrome - but both Firefox and Safari misrendered some of the accented characters.

Here's a minimum viable demo to show what's happening:

Fonts are hard, OK?!?!

Broadly speaking⁰, accented characters can be made in two way.

1. Pre-composed. There is a separate code for the character é
2. Combining. The plain letter e is immediately followed by the combining character ◌́ and the computer smushes them together.

Similarly, a font file can have separate little drawings for each accented character or it can have separate accents.

In this case, the National Theatre is using the font "Helvetica Now Display W04".

The web font contains é (U+00E9) and both ◌́ (U+0301) & ̣◌ (U+0323).

But doesn't include ẹ (U+1EB9) or ọ (U+1ECD).

So the ẹ́ and ọ́ have to be made by combining characters in the font.

On Chrome this works. On Firefox and Safari, it seems to break when the CSS is set to font-weight: normal;. This causes the browser to render those characters in the default fallback font - hence the slightly weird look.

Next Steps

I've raised a bug with Firefox and one with WebKit.

Of course, it might be that they're doing the right thing and Chrome is in the wrong - but I think that's unlikely.

Now, time to fix the font I use on this website to prevent any rendering errors!

On the desktop version, it's simple to block scripts. Click the plugin icon, then click the disable scripts button.

But on mobile it's a little more complicated. Here's how to do it on the Android version of Firefox.

Install Firefox. Then open it and install the uBlock Origin extension for Android.

In Firefox, press the ⋮ button and press "Settings":

Press "Extensions":

In the list of Extensions is uBlock. Guess what? Press it!

Press "Settings"

Finally! You come to a page with lots of complex options. I recommend putting your device in landscape mode. Along the top, scroll to "My Rules":

The "My Rules" allows you great power over your uBlock.

To block all JavaScript on example.com, type in this line:

no-scripting: example.com true

Then hit the save button.

You have now disabled JS from running on that specific site. Enjoy!

People often send DMCA requests to Google saying "this site has stolen my copyrighted content - please remove that page from Google."

Google, to their credit, let me know that they'd recently received a complaint about me 😢

Ah, dammit! What photo had I inadvertently copied?⁰ Here's what Google said:

Huh? Back in 2020, I wrote a blog post called "This blog strips off for CSS Naked Day". It contains a single image:

That's a screenshot that I took of Firefox. My use of my image on my site isn't a copyright infringement.

WTAF?

Scrolling through the legal complaint I found I was in illustrious company.

After accessing the full report, I discovered that the complaint was made on behalf of an OnlyFans user called "firefoxs" who has - to quote her bio - the "#1 Nicest Tits On OF"¹.

Needless to say, I dispute the allegation and I've filed a DMCA Counter Notification.

Perhaps this is just a case of an overzealous lawyer hitting every website which contains an image called "Firefox"? Or perhaps it is a ploy to get a bunch of irate webmasters to visit an OnlyFans page to assess the evidence?

Either way, I think the biggest pair of tits on the Internet are firefoxs' copyright lawyers!

A few days ago I had a bit of a rant on Mastodon about how PayPal was encouraging browsers to remember 2FA codes.

I'd tried to log in to PayPal, went to enter my 2FA code and was presented with this:

But, this isn't PayPal's fault! Let's take a look at the code behind each input:

<input name="otpCode-0" 
       id="ci-otpCode-0" 
       aria-invalid="false" 
       placeholder=" " 
       aria-label="1-6" 
       role="textbox" 
       aria-describedby="otpCode" pattern="[0-9]*" 
       for="securityCodeInput" 
       autocomplete="one-time-code" 
       type="number" 
       value="">

It's correctly using autocomplete="one-time-code" which means that browsers shouldn't remember any entered codes. Indeed, Firefox has support this for nearly a year.

So why was I seeing the remnants of old codes?

I was set straight by Asif Youssuff who knows a heck of a lot about Firefox. He pointed out that the values might have been saved from prior to the fix. And, he was right!

Firefox doesn't remember new codes - but it will regurgitate old codes it had previously remembered.

I'm not sure if that's desirable or sensible. But it isn't the bug I thought it was!

I went through and manually deleted the old codes - they haven't since re-appeared.

Here's how I fixed it.

1. Close down Firefox
2. Open a terminal and run:
3. firefox --allow-downgrade
4. Let Firefox start up and create a new profile. Then go to:
5. about:profiles
6. You'll see something like this:
   
7. Select "Set as default profile" and click through any warnings
8. Close Firefox.
9. Once again, run firefox --allow-downgrade

That should do it! Next time you start Firefox normally, everything should be fine. Probably.

In the future, make backups of your $HOME directory, and create a new profile for your Nightlies!

In about:config add this setting ui.caretBlinkTime of type integer. Then set the number to how many milliseconds between blinks.

250 is very quick, 500 is about normal. I tend to go for about 400. Set it to 0 if you don't want it to blink at all. Click the ✅ button and your caret blink speed will immediately change.

You can see more configuration options in the source code.

In the address bar, type in about:config and press ⏎ and accept the warning it gives you.

Add a new value ui.systemUsesDarkTheme set it to type number and pick one of the following:

• 0 to tell websites to always use the light theme.
• 1 to tell websites to always use the dark theme.
• 2 to tell websites you have no preference.

Dev Tools

If you want to do this on a one-off basis, open up the Dev Tools and click on the colour simulation icon to change your preferences.

It only works on a per-page basis and disappears when you refresh.

Why

I use dark mode on my laptop and most of my Linux apps. But I find most websites' dark mode to look a bit rubbish. By setting ui.systemUsesDarkTheme to 0, I get a nice looking light theme, which I can switch to dark if I want using the website's own controls.

I wish Firefox implemented this as an easy to use toggle switch - but this method works if you're happy to fiddle around in Firefox's guts.

What's causing this?

Try opening this link to a window size detector in a background tab. Then visit that tab.

On Chrome, this is what I see.

If I hit the refresh button on that tab, the Outer window size snaps back:

What's going on?

According to the specification:

The outerWidth attribute must return the width of the client window. If there is no client window this attribute must return zero.

This is where I get confused. The inner width & height are the amount of space the the browser has to display web content - so ignores the browser bar, menu bars, window decorations etc. The outer width & height are the total amount of space the browser window has.

How can a browser window have no outer size, but simultaneously have an inner size???!?!

There is a client window. The tab may be rendering away in the background - but its parent still has a non-zero size.

There has been a bug report open on Chrome about this since 2017.

Firefox takes a different approach. On desktop, both outer and inner are reported correctly for background tabs. On mobile, both outer and inner dimensions are set to zero. This may change as it is a potential fingerprinting target.

So, web developers, please don't rely on window.innerHeight and window.outerHeight - users may be opening your site in the background, which causes the browser to lie to you.

What happens if you use CSS to change the opacity of an emoji?

Here's a unicorn, with a pink font colour:

🦄 Unicorn

Let's wrap that in this scrap of CSS to make it 50% opaque.

color: rgba(255, 105, 180, 0.5);

🦄 Unicorn

Hopefully, you see a semi-transparent philosophical argument. What if we set the opacity to 0.0 - that is, completely transparent?

🦄 Unicorn

There's a shunicorn there. If you don't believe me, try highlighting it!

Now, let's try a see-though beastie, but this time adding a drop-shadow:

color: rgba(255, 105, 180, 0.5); text-shadow: .2em .2em .2em #000;

🦄 Unicorn

Good! And now fully transparent text plus a drop-shadow:

color: rgba(255, 105, 180, 0); text-shadow: .2em .2em .2em #000;

🦄 Unicorn

On Firefox, the text is invisible, but the emoji is completely visible - like this...

This bug is not present on Firefox for Android, nor Chromium for Linux.

The only way on Firefox, to get a completely invisible pink unicorn plus a drop shadow is to use:

color: rgba(255, 105, 180, 0.002); text-shadow: .2em .2em .2em #000;

🦄 Unicorn

color: rgba(255, 105, 180, 0.001); text-shadow: .2em .2em .2em #000;

🦄 Unicorn

0.002 is invisible, but 0.001 is visible.

I've raised this as a bug on Mozilla's Bugzilla.

In the meantime, if you can see the invisible pink unicorn, please let me know. Or contact a theologian.

Unfortunately, there's a rather annoying bug in the way it renders placeholder text. Consider the following HTML:

<textarea placeholder="In loving memory of
Buffy Anne Summers
She saved the world
A lot..."></textarea>

This should render a textarea (a multi-line input box) pre-filled with placeholder text. The text should be over multiple lines. Instead, it renders like this:

Is that right? No! Let's see what the spec says (disclaimer - I'm an editor on the HTML 5.3 spec).

User agents should present this hint to the user when the element’s value is the empty string and the control is not focused (e.g., by displaying it inside a blank unfocused control). All U+000D CARRIAGE RETURN U+000A LINE FEED character pairs (CRLF) in the hint, as well as all other U+000D CARRIAGE RETURN (CR) and U+000A LINE FEED (LF) characters in the hint, must be treated as line breaks when rendering the hint.

HTML 5.2 - 4.10.11. The textarea element

Amusingly, Mozilla's own documentation corroborates this:

placeholder

A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.

MDN <textarea>

I've raised this as a bug with Mozilla - sadly, my C++ is too rusty to contribute a patch!

"Harry ‮".draziw a si ‭Potter

Now, try to select the text and see what happens.

WHAT WITCHCRAFT IS THIS?!

If you examine the source code for this page, you'll see that I'm using the Unicode Bi-Directional characters.

"Harry ‮".draziw a si ‭Potter

These characters are useful when writing text that includes, say, English and Arabic - but they can also be used for malicious purposes.

On a more mundane level, they can cause all sorts of UI bugs. I've just filed a bug against the Chrome browser for how it handles these characters.

If you right click on text with mixed direction, you'll notice that the UI behaves oddly.

In Firefox, the behaviour is correct - although one could argue whether "Potter" ought to be reversed.

Searching

So, what happens when we run these searches?

Neither Firefox nor Chrome do particularly well. I'm not sure if the reversed text in the window title and URL bar are bugs in Ubuntu - or whether it's the fault of the app itself.

On Windows and Mac, we see this happen:

This would suggest that Google isn't correcting the direction of the text and that is deforming its own title tags.

Are These Bugs?

Ok, so having the title reversed isn't the worst problem in the world. But do these examples count as bugs and, if so, who is responsible for them?

Every search engine I tried passed through the right-to-left-over-ride unscathed - so that's the fault of the search engine, right? How the hell do you a report a bug to Google?

The title bar could either be a problem with the browser - Firefox has a bug report over a year old on the issue - or the problem could be with the underlying operating system. How would one find out?

Thanks

Thanks to Yuan Phoon for asking the questions which prompted this discovery.

At the moment, Chrome (and other Android browsers) ask for permission before accessing features such as geo-location, camera, address book etc. This is a security measure to prevent your private information leaving your hands without your knowledge.

At the moment, accessing the HTML5 Vibrate API doesn't trigger an on-screen warning. Its use is seen as pretty innocuous. Because, realistically, the worst it can do is prematurely drain your battery. Right?

I'm not so sure.

Evil Thoughts

We've all seen those scummy adverts designed to look like Windows pop-ups. They usually pose as a legitimate system request - "Update Java" or similar.

Suppose a malicious web page pops up a fake system notification and vibrates at the same time. How confident would you be of telling the difference between a legitimate pop-up and a .png on the web page you're viewing. After all, the phone buzzed - so it must be genuine.

Are you really receiving an "AirDrop" - or is this page trying to trick you?

Autoplaying sound on adverts in annoying - auto-vibration could be just as irritating. Imagine searching through tabs until you found the single advert which was pulsing away trying to get you to buy new insurance.

For now, the intensity of the vibration cannot be controlled - only the duration. It is not impossible to conceive of malicious code being able to exploit an unpatched browser flaw and overdrive the motor to destruction.

Faking Telephone Calls

When combined with HTML5 Audio, it would be possible to create a fairly realistic "Incoming Call" screen which vibrated and played a ringtone. Once "answered", the page could play some audio which says "Hi, can you call me back urgently - my number is [premium rate line]" and then, perhaps, automatically open up the dialer using the tel: URI. Could you tell if the above was a real phone call? If you looked closely, probably, but when the browser is playing your phone's default ringtone and the handset is vibrating, it would be pretty easy to be confused. Combine it with a WebRTC call and you're looking at a very convincing scam.

Video Demo

Source Code

Here's a basic example which you can try on your own phone - demo site.

<body>
   <script type="text/javascript">
      navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
      navigator.vibrate([1000, 500, 1000, 500, 1000, 500, 1000, 500, 1000, 500, 1000, 500, 1000, 500]);
   </script>
   <img width="100%" src="phone.png" onclick="window.location.href='tel:09098790815';" />
   <audio autoplay="autoplay">
      <source src="ring.mp3" />
   </audio>
</body>

At the moment, the auto-vibrate and auto-ring only work on Firefox for Android. But no doubt other browsers will follow suite soon.

Warnings

Firefox was the only browser I found which supported Vibrate - on Android, neither Samsung's browser, Chrome, or Opera did - iPhone also doesn't yet support it. No one cares about Windows Phone or BlackBerry - so I didn't test them*.

Firefox doesn't currently ask for permission when a page requests access to vibrate.

Do you think browsers should warn before a page vibrates - or is the risk too low? I guess we'll have to see if the scammers take advantage of it - and whether there is a user backlash.

*Update: thanks to the comments on Reddit and on HackerNews it would appear that BB10 does support the vibrate API, Windows Phone doesn't.

Yesterday morning I asked the Number 10 Downing Street web team if they could provide their statistics. I figured that the PM's website gets enough readers from a wide selection of the web community to give a fairly impartial measure of the popular web browsers.

Here's their (very quick) reply

Terence Eden is on Mastodon

@edent

Replying to @10DowningStreet@downingstreet can you tell us how many Firefox/IE/Safari users visit the Number 10 website? Would be really helpful to UK web developers

---

UK Prime Minister

@10DowningStreet

Replying to @edent@edent Top are: IE7 22%, IE8 20%, IE6 12%, Firefox3.5.3 9%, FF3.5.2 7%, FF3.0.14 5%, FF3.0.13 4%, Safari 4.0.3 4%, Chrome 2.0.172.43 2%

---

Or, to express it graphically...

Chart Showing Browser Stats

Firefox overall accounts for 25% - a fairly strong showing. But with IE6 stubbornly stuck at 12%, it will be a while before we can consign it to the dustbin of web history. Opera is languishing in the 15% marked as "Other" along with my browser of choice, Lynx.