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):

Comparison of Japanese IME suggestion box appearing on the left of vertical input in Microsoft Edge, Firefox (on left) compared to Chrome with box appearing over vertical text input (on 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.

You want that transparent, semitransparent or translucent?

Now that I have time messing around with things after my courses have finished (including returning to blogging), I found this interesting option for closed captioning in Windows 10:

Image of Windows 10 Settings app, under Ease of Access, Closed captions. "Caption transparency" drop down menu selected, with options: Default, Opaque, Translucent, Semitransparent, Transparent

(How nice of Microsoft to include a shot our favourite Hobbit residence for the preview pane.)

You get to choose caption transparency as:

  • Default
  • Opaque
  • Translucent
  • Semitransparent
  • Transparent

I can’t believe such a poorly designed set of options is available in a section titled “Ease of Access”.

Let me point out the few problems I have with this:

I’m not sure how many people actually understand fully what the difference is between something being translucent and transparent. I used to be quite bad at this and got told off by my high school design teacher for confusing the two.

You can probably guess that the former is more opaque than the latter from the order in the drop down, and you’d be right. But it’s not like they couldn’t use sensible, easy-to-understand numbers… right? Oh wait.Caption size drop down menu with options: 50%, 100%, 150%, 200%.For consistency, they should have replaced them with “Semiregular”, “Regular”, “Enlarged” and “Big”.

What’s the “Default” value? Should captions not be opaque by default? Is the default caption size 200% because captions may be more useful when they’re larger for vision impaired people? Who knows.

What’s the difference between the “Translucent” and “Semitransparent” options? By its very definition, translucency is partial transparency, which one would associate with the word “semitransparent”! Even Google says so:
Google definition card for "translucent", with definition: "translucent: adjective; (of a substance) allowing light, but not detailed shapes, to pass through; semi-transparent"Here’s the difference between the two options:Previews of closed captioning set to "Translucent" and "Semitransparent" side by side. "Translucent" is noticeably more opaque.So “semitransparent” is more transparent than “translucent” but only because it has the word “transparent” in it. Ugh.

What purpose does “Transparent” serve? I seriously don’t know, because it really does set it to make it completely invisible.
Preview of closed captioning set to "Transparent" and "Semitransparent" side by side. Caption is not visible.If someone needs to use closed captions, why on earth would they set it to “transparent”? And if they don’t want it, they should be able to just turn it off from within whatever application they’re using and not make a system-wide change! (And a practically useless one at that!)

Rant over.

Reuploading old NXTBUS API stuff

Now that exams are over, I can finally get back to tidying up stuff!

I’ve put back online the NXTBUS pages that used to be on my old website; these are available at: https://nxtbus.nya.nz.

They are still functional and work with Canberra’s real time bus tracking system by using YQL queries to fetch content from the ACT Government/ACTION website directly.

This method is not useful anymore because developers can actually get access to a proper API now (I didn’t sign up because I wasn’t going to be in Canberra for much longer) – but it was an interesting experiment to see what sort of data was there back when the original first-party service was launched but the API was not yet public.

It was quite interesting to see that you could query past dates and view expired entries – I remember you could just put 0 for the timestamp and get history as far back as possible, but now you have to put it within the hour or so, or you don’t get information back at all.

Nothing has really changed since I put it up in August 2014 and there’s no point to doing anything to it, so it’s there mainly for posterity. YQL definitions are also included at the bottom of the relevant pages if one wants to find out how the data is fetched/parsed.

SinE – Day 2: Rome

Before I begin, an update on photos: I’ve uploaded panoramas to Google+ so that you can interact with them in “3D”! Simply click on the link in the captions. The last post has been updated as well.

I’ve been pretty slow on posting because of studies (at this rate it might take a year to complete), but the semester’s nearly up so I expect to be able to post more frequently in June/July.

Not only that, Chrome crashed twice when writing this post (because of Flickr!) before WordPress saved my changes, so I’m getting into the habit of saving more often.

 


Day 2/February 3: Rome

Wet.

It was mostly showers on-off all day which put a damper on things, so Day 2 was spent going slower than I had the previous day and ended up going to far fewer places than expected.

Continue reading SinE – Day 2: Rome

SinE – Day 1: Rome

Update: Now with photo sphere links for panoramas (15 May)

After going through a couple of weeks of hectic university projects (of which the last week I have now nicknamed the “Assignment Week from Hell” because teachers must be colluding to make everything due in that week,) I have finally been able to resume organising and posting!

Images for the entire trip will be available on my Flickr album – they’ll be incrementally released once I finish their respective blog posts, so right now you’ll only see photos relevant to the first day or so. Continue reading SinE – Day 1: Rome

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:
UoA Timetable, Semester 1 2015

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.

My European solo trip photos (over 4500!, of which there are many redundant ones) are being looked at over the next couple of days, and posts should resume after this.

* 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.)

SinE – Day -1: Europe?

There are probably a handful of people who actually know I’m going to Europe… (or for that matter, that I’ve been in Auckland for a bit.)

So here I am at Auckland Airport, with the plane sitting outside which means I don’t get to use an airbridge (boo!)

CX 197/198 plane sits on tarmac at Auckland International Airport
Shuttle buses instead of airbridges? How dare they!

I’ll be in Hong Kong via. CX198 in roughly 12 hours and then another 12 hours to a destination in Europe, adding to a combined +1 day difference from the date of departure (hence “Day -1”.) Any guesses to where the destination is?

I’ll be there for just over three weeks, going in roughly a semicircular sweeping travel path within Europe before returning with a brief 2 night stopover in Hong Kong.

This has also been probably the most last minute travel trip ever. Plane tickets purchased less than a week ago, and only the first week of accommodation reserved. But that adds to the excitement doesn’t it?

I’ll be going over travel plans as I go, so suggestions would also be nice to hear!

I’m going solo – and “Solo in Europe” just so happens to share the “SinE” acronym that people from Robogals would know. (No trademark was infringed right? :P)

Anyway, boarding is about to begin. Wi-Fi is everywhere so I should be able to catch up a little over the trip.

See you in Hong Kong (while transiting!)

にゃ?

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.)

Some might know that I have manhinli.net, but that at the moment is not really doing anything special as the web host environment is pretty standard and inflexible.

Why “nya.nz”? I thought it would be fun to get inspiration from Japanese which I’ve started to pick up for the last year. I previously studied it 10 years ago, so it’s not completely new, but I never really used it so most things are slowly coming back…

For those who aren’t familiar, にゃ (nya) doesn’t have a distinct meaning, but means more like an onomatopoeic meow. Google should help you in understanding this a bit better.

I suppose my return to blogging isn’t much to really celebrate about – I’ve been more active (though not to the level of ” social media active”) on Twitter, which you can find by clicking the link in the menu.