How-To Embed Baybayin On Your Website or Blog

These past few months, there was a surge in awareness of the Baybayin (not Alibata) writing script among the Filipinos. As Baybayin enthusiasts learn how to read it, the need to type it directly from our keyboard grew. The Baybayin Keyboard Layout was released as part of the Ubuntu PhilippinesPhilippines National Keyboard Layout project (which is available in both GNU/Linux and Microsoft Windows).

The PNKL project allowed many Filipinos to type Baybayin without using any “online typepad” like the Snoworld Baybayin Typepad 01. But other than this, there is also a need to embed Baybayin on websites and blogs, and I’ve been asked about it a lot of times. In response, here is a detailed how-to guide on how you can display Baybayin correctly on your websites.

So go get a cup of coffee, tea, or chocolate. Prepare yourself, your mind. Get ready to learn a lot of new stuff.

Getting your font(s) ready

We want to display Baybayin and so we need the proper font(s) for web display. Go get your favorite Baybayin font and put it somewhere easily accessible for you. After that follow these steps:

  1. Go to FontSquirrel’s @font-face generator
  2. Click the “Add Fonts” button and upload your font(s)
  3. Choose the “Expert…” radio button
  4. On the “Font Formats:” row, check all checkboxes
  5. On the “Subsetting:” row, choose “Custom Subsetting…” radio button
  6. New rows will show up, scroll down until you see “Unicode Ranges:”
    fontfacegenerator.png
    FontSquirrel @font-face generator
  7. Choose the correct range below, if your font is Tagbanwa then copy the Baybayin Tagbanwa Unicode range below and paste it in the “Unicode Ranges:” field as shown in the image above.
    • Baybayin Tagalog script: 1700-1714,1735-1736
    • Baybayin Hanunoo script: 1720-1734,1735-1736
    • Baybayin Buhid script: 1740-1754,1735-1736
    • Baybayin Tagbanwa script: 1760-1774,1735-1736
  8. Then on the “Agreement:” row, check the checkbox if your font is legally eligible for web embedding, otherwise acquire a written permission from the original author.
  9. Click the “Download Your Kit” button to get your web embed compatible font
  10. Upload the content of your downloaded font kit to your webserver

Time to embed your font(s)

Next step, embedding your font kit to your website.

  1. Open your stylesheet file (*.css)
  2. Extract your font kit (you created above) and open the “stylesheet.css” file
  3. Copy the @font-face code snippet to your website’s stylesheet file
  4. Change the URL/location of the files to point to where you uploaded your font(s), my stylesheet looks like this:

    Prism Shortcode Error: field, url, data_src is missing

  5. If your font-family is called “BaybayinModernBrush1” (see example above) then add it as the first font in all instance of “font-family:” in your css file like so:

    Prism Shortcode Error: field, url, data_src is missing

  6. Similar to the previous step, this time search for “font:” If there are other font declarations, then add your font name as the first. Example:

    Prism Shortcode Error: field, url, data_src is missing

  7. Save and upload

Displaying the font on your website

You’re done. But how to properly display Baybayin on your website? You have a couple of choices:

  1. Enter the corresponding hex codes like so: &#xNNNN (N = number), you’ll have plenty of

    Prism Shortcode Error: field, url, data_src is missing

  2. Use an online Snoworld Baybayin Typepad 01 and copy-paste to your website
  3. Download the Philippines National Keyboard Layout and type Baybayin directly

Obviously, option #1 is the hardest, longest, and more error prone way. While option #3 is the easiest, fastest, and less error prone way (provided you know the rules of Baybayin, you’ll be typing correctly in no time).

That’s it!

Is a self-confessed bibliophile and technophile other than being an early adopter, an avid gamer, a geek, nerd, role-player, anime otaku, and trekker.

His first online project was in 1998 when he launched the unofficial website for Ansalon MUD and his own community forums Laibcoms.Community. By 2003 he created his work blog GM-Yukino which grew into gameshogun™, Snoworld™, and techmagus™.

His website is jcsesecuneta.com and 1way.faith. He also owns Clean Real Food, YourOnly.One, Adorable & Beautiful, and other online properties.

CC BY-SA 4.0 How-To Embed Baybayin On Your Website or Blog by Yuki is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at Legal Notice.

Comment(s) via

Loading Facebook Comments ...
Loading Disqus Comments ...
Skip to toolbar