Shaking like a Leaf (III): Hitting turbulence

This blog post is part of a series about my road trip around South/East Australia in an electric vehicle. Read other posts using the same tag.

Day 5: Cowra via Blue Mountains

My Sydney visit came to an end, and it was time for me to start the inland part of my trip.

After a brief charge just short of the Blue Mountains, I headed along the winding highway to Katoomba to see if I could catch a look at the famous Three Sisters sandstone formations…

Continue reading Shaking like a Leaf (III): Hitting turbulence

Shaking like a Leaf (II): Cities, big and small

This blog post is part of a series about my road trip around South/East Australia in an electric vehicle. Read other posts using the same tag.

Day 2: Newcastle to Sydney

Even after the long day yesterday, I was already up at 6, with the warm sun beaming through the windows.

I had already charged the car to 90% overnight, but because there’s free charging I thought I might as well get the car charged to 100% before heading out to Sydney – saves me a bit of cash and also helps get my car further with the hilly terrain expected along the way. Two of the four spots were already occupied at the charging station near the wharf by 7:30am – all chargers were occupied soon after, which wasn’t surprising considering it didn’t cost anything to charge here.

Continue reading Shaking like a Leaf (II): Cities, big and small

Shaking like a Leaf (I): From dawn till dusk

This blog post is part of a series about my road trip around South/East Australia in an electric vehicle. Read other posts using the same tag.

Day 1: Brisbane to Newcastle via Pacific Highway

The first day involved travelling from Brisbane to Newcastle, which is around 780km. This was going to be longest I would be driving in a single day – partly because I had planned the road trip a little late and needed to fit around some schedules to catch up with people along the way. I probably would have stopped to stay in places like Coffs Harbour along the way if I hadn’t stuffed up the timing of the initial part of the trip.

A screenshot of the A Better Route Planner app, with a route marked between Brisbane and Newcastle, with multiple pins indicating locations for electric vehicle charging.
ABRP in action.

For general planning I used the “A Better Route Planner” app (ABRP) which suggested that it would take around 12 hours or so all up to cover the distance with some of the stopovers included. This app automatically routes travel to include charging stations, adds charge time to the total trip time, and you can even customise things like the remaining level of charge you want when arriving, and so on. I’ll pop comments about ABRP throughout this series, but overall I have found it pretty good and mostly lined up with my manual planning before I discovered the app, though its UI has quite a few quirks which can be frustrating at times.

For this leg I gave myself another 2 hours above the estimate, and planned for 14 hours in total with around 9 hours on the road. That would mean I would start at 3am AEST and arrive around 6pm AEDT.1 An early start, but not something I haven’t done before in previous travels.

Continue reading Shaking like a Leaf (I): From dawn till dusk

Shaking like a Leaf: the EV road trip from hell?

This blog post is the first in a series about my road trip around South/East Australia in an electric vehicle. Read other posts using the same tag.

Not many people know that I had acquired a Nissan Leaf as a second-hand Japanese import into Australia during COVID. It’s a battery electric vehicle, that until 2020 was the most popular consumer electric car in the world, and I decided to make it my first car after years of solely using public transport in various cities and needing a little bit more flexibility.

Continue reading Shaking like a Leaf: the EV road trip from hell?

Virtual Japanese manuscript paper – a short experiment in HTML and CSS, and how browsers fare with vertical text input

If you just want to give this a try now, see the demo page.

A couple of days ago I was looking into the best way to make a custom grid pattern in the least number of HTML tags. The grid only had to be visual, so it didn’t actually need to contain any content (hence the desire to use as few HTML tags), but needed to have a grid that wasn’t just some ordinary square tessellation.

Turns out it’s actually quite easy to do this: CSS has multiple backgrounds and linear gradient capabilities for a few years now. What I hadn’t realised before this was that background positioning was also doable for each of the individual backgrounds. This turns out to be the key to doing this.

Then I thought – why not try applying this to vertical writing? Specifically, creating Japanese manuscript paper (known as 原稿用紙) that I could use on the web without the need for JavaScript to position the text into the “grid”.

Image of Japanese manuscript paper

To replicate the grid, you only need four background layers (plus the white normalising background):

background:
    linear-gradient(to right, transparent 0%, transparent 1px, white 1px, white 0.5em, transparent 0.5em, transparent 100%),
    linear-gradient(to bottom, #CCECCE 0%, #CCECCE 1px, transparent 1px, transparent 100%),
    linear-gradient(to right, #CCECCE 0%, #CCECCE 1px, transparent 1px, transparent 100%),
    linear-gradient(to right, #CCECCE 0%, #CCECCE 1px, transparent 1px, transparent 100%),
    white;

background-size: 1.5em 1em;

In order from bottom to top (4th to 1st in the list of linear-gradients above), they are:

  • Vertical line (one side of the column)
  • Vertical line (other side of the column)
  • Horizontal line
  • Mask to cover the horizontal line in the line breaks

The background-size defines a width of 1.5ems, as each grid cell contains the character block (1em) and the line break to the side, which I’ve set to be half width.

All the definitions here are creating 1px wide lines (except for the mask which covers one half-width block in white), so there’s a need to position them or it’ll just be overlapping with each other:

background-position: 0 0, 0 -1px, 0 -1px, 0.5em 0px;

This also is able to work around the inability to specify gradient stops from the end of a linear-gradient. Simply overlay the “other end” of the gradient in the opposite direction and offset it (though this will probably fail to work perfectly for very complex gradients.)

Offsets of -1px are the default for the lines because the outer edges will be given by the border of the whole element, while the last of the vertical lines is offset by 0.5em to emulate the line break region. The mask itself is already aligned to this line break region, so there’s no need to move it.

That’s it. Extremely easy once you get how it’s composed.


Here’s the demo – and I’ve put in vertical writing as part of the grid, so you can see how full-width text fits into the square blocks. That in itself was easy with CSS’s revised writing-mode property.

I’ve enabled contenteditable on it so you can enter CJK (Chinese, Japanese, Korean) full-width text and it should fit! Plus you can print it out for your own use – enter some sample text and practice your handwriting on the printout!


Out of the three Windows browsers I tested (Edge, Chrome, Firefox) – Edge seemed to have the best overall rendering and editing experience. (In fact, Internet Explorer has been supporting vertical writing longer than the other major browsers – since IE 5.5 more than 15 years ago!) Chrome and Firefox are pretty much on par, bar a few minor visual imperfections.

Also interesting was how the browsers handled vertical writing flows and keyboard navigation: Edge and Firefox follow the direction that you enter on the arrow keys, while Chrome follows the direction in the text direction as if you were handling horizontal text rotated 90 degrees clockwise (as in, [RIGHT ARROW KEY] would move down the page.)

In addition, input IMEs are handled much better in Edge and Firefox (left), compared to Chrome (right):

As a side note, I tried using flexbox for the layout, one: because I wanted to layout the page so that the explanatory text is on the right (while keeping the same HTML structure) and grid aligning to the right, and two: because it would allow for easier sizing of the containers, but unfortunately pretty bad rendering bugs with flexbox and top-bottom/right-left text flows meant that it broke the ability for scrolling when the “virtual paper” overflowed. Oh well – maybe browser vendors can fix this in a couple of years… I hope.

Wait. Uni… again?

This will be short (by my standards) as I’m heading off to start the semester tomorrow when I’ve only just returned less than 48 hours ago, which also included missing Orientation and other things, so that’ll be fun!

I don’t think I can keep up with short-notice surprises on the first of every month, since you probably won’t believe me on April Fools (maybe?) and for the obvious reason that 12 surprises a year would evidently give a poor reader some form of stress-related heart attack[citation..?].

After my graduation from the Australian National University last year, I secretly came back on a mission which involved a bit of toing and froing between departments at the University of Auckland.

End result? I’m now officially a postgraduate student doing Software Engineering* there for at least a little while. Just as that was wrapping up, I jetted off to Europe – with fingers crossed for approvals for my courses which required concessions to be applied (and eventually they did.)

And just in case you’d like to stalk my jetlagged person around, here’s a handy timetable:

So…

  • Yes, I’m now really in Auckland.
  • No, I’m not hanging around a university campus for no reason.
  • Yes, I’m not yet tired of university studies as you can probably tell. Though I will probably be tired of even earlier morning calls now.
  • No, less than a handful of people here actually knew about this – you know who you are if you do.
  • Yes, I’ll be stuck on some form of Auckland’s (sub-par, but improving) public transport for about an hour each way.
  • And no, I didn’t really have a plan for taking this until quite late last year, so as with the theme of this year so far: last-minute.

* Technically it’s a bit more complicated than that, since they actually rejected my application outright the first time, so I’ve ended up having to do a bit of an odd pathway, which actually means I may end up being categorised under Computer Systems Engineering.
But the list of possible course choices are practically the same so I don’t see that being a high possibility. (Or who knows? I can be wrong, when I was not-so-pleasantly surprised with the declined initial application.)

にゃ?

After a couple of years of not maintaining a blog, I thought it was time to get one going again. It must be something like 5 years since I’ve last properly used one!

This is running on a Linode virtual instance somewhere on the West Coast of the USA and doesn’t have much at present (set up was only a couple of days ago.) Update: Much has changed since this was first written…

Continue reading にゃ?