How to solve wireless-disabled-by-hardware-switch problem

29 Zulhijah 1433H, Rabu.

The problem

Assalamualaikum. Being back in my hometown (balik kampung!), i tried to establish a connection from my laptop to my mother's Wi-Fi. Unfortunately, it shows in the Network Connections menu that, see Pic 1:

wireless is disabled by hardware switch

Pic 1 - The Network Connections menu in the Panel. No wireless connection.

Searching for the nearest LAN (local area network) cable i can get my hands on, my brother borrowed me his USB wireless adapter instead but the device was not detected by my laptop. So i had to borrow my brother's LAN cable. The cable was detected upon being plugged-in.



The background

The only switches on this laptop, a Lenovo IdeaPad Z470, are two; one for graphic acceleration and one for network (bluetooth and wireless).

The network switch on this laptop (and probably on other laptops as well) controls both the bluetooth and wireless connection. In other words, flick this network switch OFF, you switch off both the bluetooth and wireless connection. But somehow, when the network switch is ON, only the bluetooth has connection but not the wireless.

In the BIOS (Basic Input/Output System) I even tried disabling something (forgot what it was :D), reboot, then enabled what i disabled, reboot and gave the wireless a try -- didn't work.

This problem has probably been around me for sometime, only i didn't notice it because i use cable all the time. I even insisted that my husband setup a second router nearby so that i can plug-in from there ^^



The solution

This solution is for those who have Ubuntu setup to dual boot with Windows. Yes, Microsoft Windows!

Could this wireless problem be something faced by those who have dual boot?


1. Reboot the device to startup in Windows.


2. Flick the the physical (hardware) network switch ON. See Pic 2.

If it's already ON, switch it OFF (see Pic 3) then ON again.

Pic 2 - Refer to Step 2. The network switch turned ON.

Pic 3 - Refer to Step 2. The network switch turned OFF.

3. Try connecting to a wireless network. --This is to make sure there is no problem your computer's network card.


4. Reboot to startup in Ubuntu.


5. Check the wireless connection. It should work this time. See Pic 4.

Pic 4 - Refer to Step 5. The Network Connections menu in the Panel. Welcome back, wirelesses!

The simulation

To simulate the problem:

i - reboot into Windows

ii - physically turn OFF the network switch

iii - reboot into Ubuntu

iv - try to connect via wireless



Note 1

The only downside if i leave the network switch ON is, i have to softly (software, via the Panel) disable the bluetooth after every startup. Otherwise i can turn OFF the switch and forget about the bluetooth.



Note 2

If somehow you flick the network switch OFF then after the next startup you want to use the wireless: flick the switch ON then Log Out then Log In. Reboot if logging in and out does not work.


Wassalam.

Keyboard input for Japanese Hiragana and Chinese Pinyin

21 Syawal 1433H, Sa.

Assalamualaikum warahmatullah.


Part A: The Japanese Hiragana

My cousin asked how to make the Hiragana script (one of the Japanese scripts) available on Ubuntu because the script is available on Gwibber but not available system-wide. She noted that it was Katakana that is available system-wide.

The modern Japanese writing is dividable into three scripts:

1. Hiragana which looks like this: ひらがな (reads: hiragana)
2. Katakana which looks like this: カタカナ (reads: katakana)
3. Kanji which looks like this: 漢字 (reads: kanji)

Romanized Japanese is called Romaji.

Read more about the Japanese writing system, here:
Japanese writing system - Wikipedia, the free encyclopedia
(http://en.wikipedia.org/wiki/Japanese_writing_system)

You may find this webpage (one of Jim Breen's webpages) to be useful:
WWWJDIC: Text/Word Translation
(http://www.csse.monash.edu.au/~jwb/cgi-bin/wwwjdic.cgi?9T)



Part B: The Chinese Pinyin

Romanized Chinese is called Pinyin.

You may find this online dictionary to be very helpful:
Xiaoma Cidian - Chinese English Dictionary
(http://www.xiaoma.info/)

"Romaji is to Japanese as Pinyin is to Chinese"



Part C: How to "activate" Hiragana

After some googling, i found this blog:
Japanese Input on Ubuntu Linux 10.04 LTS Lucid Lynx - Localizing Japan
(http://www.localizingjapan.com/blog/2010/06/15/setting-up-japanese-input-on-ubuntu-linux-10-04-lts-lucid-lynx/)

which was mentioned, here:
How do I get keyboard to write hiragana instead of katakana? - Ask Ubuntu
(http://askubuntu.com/questions/28669/how-do-i-get-keyboard-to-write-hiragana-instead-of-katakana)


1. Accessing the Language Support window.


1.1. In the Launcher, see Pic 1, click the Dash Home icon, see Pic 2.

Pic 1 - Refer to Step 1.1. Accessing the Language Support window.

Pic 2 - Refer to Step 1.1. The Dash Home icon in the Launcher.

1.2. In the Search field, type-in "language", see Pic 1.


1.3. Click the Language Support icon, see Pic 3.

The Language Support window will appear, see Pic 4.

Pic 3 - Refer to Step 1.3. The Language Support icon.

2. Step 2 to Step 4 is to install the packages for the language.

In the Language Support window, under the Language tab, click the Install/Remove Languages... button, see Pic 4,.

The Installed Languages window will appear, see Pic 5.

Pic 4 - Refer to Step 2. The Language Support window.

3. In the Installed Languages window, see Pic 5, search for the Japanese language.

Put a tick in the box under the Installed column for the Japanese language.

Then click the Apply Changes button.

Pic 5 - Refer to Step 3. The Installed Languages window.

4. The Authenticate window, see Pic 6, will appear to ask for your password.

Key-in you password in the Password field.

Then click the Authenticate button.

The Applying changes window, see Pic 7, will appear to show the progress. Allow some time for the process.

Pic 6 - Refer to Step 4. The Authenticate window.

Pic 7 - Refer to Step 4. The Applying changes window.

5. Step 5 to Step 9 is to setup the input method.

In the Language Support window, see Pic 8, under the:

Keyboard input method system:

choose:

ibus

Then the Language Support window can be closed.

Pic 8 - Refer to Step 5. Setting the keyboard input method system.

6. Setting up the input method.


6.1. In the Launcher, see Pic 9, click the Dash Home icon, see Pic 2.

Pic 9 - Refer to Step 6.1. Accessing the IBus Preferences window.

6.2. In the Search field, type-in "ibus", see Pic 9.


6.3. Click the Keyboard Input Methods icon, see Pic 10.

Pic 10 - Refer to Step 6.3. The Keyboard Input Methods icon.

7. A nameless window, see Pic 11, will appear with:

Keyboard Input Methods (IBus Daemon) has not been started. Do you want to start it now?

Click the Yes button.

The IBus icon, see Pic 12, will appear in the Panel.

Pic 11 - Refer to Step 7. Nameless window-1.

Pic 12 - Refer to Step 7. The IBus icon which appears in the Panel. Note that the Keyboard Layout icon has nothing to do with the IBus icon.

8. Another nameless window, see Pic 13, will appear with:

IBus has been started! If you can not use IBus, please open System Menu -> System Settings -> Language Support and set the "Keyboard Input Method" to "ibus", then log out and back in again.

Click the OK button.

Pic 13 - Refer to Step 8. Nameless window-2.

9. The IBus Preferences window, see Pic 14, will appear.

Go to the Input Method tab.

Put a tick in the box next to:

Customize active input methods

From the Select an input method menu, choose Japanese > Anthy.

Click the Add button.

Then close the window.

Pic 14 - Refer to Step 9. Adding the input method.

10. Giving Hiragana a try.

Open LibreOffice Writer or any other program.

Click the IBus icon in the Panel, see Pic 15.

In the menu, change from Input method Off to Japanese - Anthy then type-away.

To write, you type in romaji, e.g. nihongo. As you type, that would be replaced by hirigana にほんご. Hit space and that would be replaced with the kanji 日本語. Hit space again and you get a menu of other ways to represent it, which is important as Japanese has many homonyms.

Source: How do I get keyboard to write hiragana instead of katakana? - Ask Ubuntu
(http://askubuntu.com/questions/28669/how-do-i-get-keyboard-to-write-hiragana-instead-of-katakana)

When you're done, remember to change the input method back to Input method Off.

Pic 15 - Refer to Step 10. Changing the input method.

Part D: Starting IBus the next time

11. If the input method is giving you trouble, try restarting the application automatically by choosing Restart from the menu, see Pic 15.

If the problem persists, simply Quit the application, see Pic 15, and restart it manually, see Step 12.


12. Next time, to start the application, in the Launcher, see Pic 9, click the Dash Home icon, see Pic 2.

In the Search field, type-in "ibus".

Click the IBus icon, see Pic 16.

Pic 16 - Refer to Step 12. The IBus icon.

Part E: How to "activate" Pinyin

I don't think the Pinyin input in my system came with the Japanese language package shown in Step 3 to Step 4. i think it came with some other packages that were installed in the previous version of Ubuntu.

Pic 17 - The added input methods.

13. If you need to add Pinyin, repeat Step 3 to add the package.

Search for the Chinese (simplified) language package see, Pic 18.

Pic 18 - Refer to Step 13. Adding the language package.

14. Repeat Step 9 to add the input method.

In the IBus Preferences window, see Pic 17, go to the Input Method tab.

In the Select an input method menu, add Chinese > Pinyin.

Then click the Add button.



Wassalam.

How to update Ubuntu using the Terminal or Update Manager [Ubuntu 12.04 Precise Pangolin]

Updated: 28 Syawal 1433H / 15th Sep 2012M, Sa.

19 Syawal 1433H, Kh.

Assalamualaikum warahmatullah.

I've just upgraded from Ubuntu 11.10 Oneiric Ocelot to Ubuntu 12.04 Precise Pangolin.

For some reasons the system has given me internal errors since the last two start-ups.

My cousin suggested the reason to be the dual-boot thus not everything was upgraded. To try iron out the problems, she suggested updating the system manually using the Terminal. Then remove unneeded packages using the Terminal as well.

The command line has changed since Ubuntu 9.10 Karmic Koala. The old post:
How to update Ubuntu using the Terminal or Update Manager [Ubuntu 9.10 Karmic Koala]
(http://ubuntudigest.blogspot.com/2010/03/how-to-update-ubuntu-using-terminal-or.html)

I stopped using the Terminal after i had some problems with the update or something and have been updating using the Update Manager since. The problem happened some releases back. That's why i haven't update that post although aware of the change in command line. But there's no reason not to make a new post now.


Part A: Update using the Terminal

Pic 1 - The Terminal window.

1. Run the Terminal window.

i'm used to the Launcher being auto-hidden in Ubuntu 11.10 so i had the Launcher hidden for Ubuntu 12.04 as well.

In 12.04 - the launcher is not hidden by default.

Source: configuration - How do I configure Unity 2D? - Ask Ubuntu > 11.10 & above
(http://askubuntu.com/questions/32667/how-do-i-configure-unity-2d)

1.1. Go all the way to the left of the screen to call-out the Launcher. Skip this step if your Launcher is not auto-hidden.


1.2. In the Launcher, click the Dash Home icon, see Pic 2 and Pic 3.

Pic 2 - Refer to Step 1.2. The Dash Home icon in Launcher.

Pic 3 - Refer to Step 1.2. Accessing the Terminal.

1.3. In the Search field, type-in "terminal", see Pic 3.

The search results will auto-filter.


1.4. In the filtered results, click the Terminal icon, see Pic 4.

The Terminal window will appear, see Pic 1.

Pic 4 - Refer to Step 1.4. The Terminal icon.

2. To get the list of packages, type into the Terminal the command line, see Pic 5:

sudo apt-get update

then press the Enter button.

Pic 5 - Refer to Step 2. Getting the updates.

3. The password prompt for user, see Pic 6:

[sudo] password for aisha:

will appear immediately below the command line in Step 2.

Type-in your password then press the Enter button.

The password itself (i.e., ABC123) or characters representing the password (i.e., ******) will not appear as you type-in your password. Even the cursor doesn't move as the password is typed-in, instead it remains blinking in the same spot.

The fetching is done when the line, see Pic 7:

Reading package lists... Done

appears.

Pic 6 - Refer to Step 3. The requested password.

Pic 7 - Refer to Step 3. Done fetching lists of packages.

4. To see the list of updates required for your system, type into the Terminal the command line, see Pic 8:

sudo apt-get install

then press the Enter button.


..., see Pic 9:


To install the updates, type into the Terminal, see Pic 10:

y

then press the Enter button.

Pic 8 - Refer to Step 4.

Pic 9 - Refer to Step 4. *No updates at the moment to make screenshot.*

Pic 10 - Refer to Step 4. *No updates at the moment to make screenshot.*



Note 1: Autoremove

Sometimes you get the, see Pic 11:

The following packages were automatically installed and are no longer required:

response.

Pic 11 - The no longer required packages.

5. To automatically remove obsolete/unnecessary packages, type into the Terminal the command line, see Pic 12:

sudo apt-get autoremove

then press the Enter button.

Pic 12 - Refer to Step 5. Removing the unnecessary packages.

6. When asked, see Pic 13:

Do you want to continue [Y/n]?

Type in:

y

to continue the removal process then press the Enter button.


Type in:

n

to quit the removal process then press the Enter button.


The removal process is done when the line (user@computer:~$), see Pic 14:

aisha@Lenovo-Aisha:~$

appears.

Pic 13 - Refer to Step 6. Confirming the removal process.

Pic 14 - Refer to Step 6. The removal process is complete.

Note 2: Upgrade

Sometimes you get the, see Pic 15:

0 upgraded, 0 newly installed, 0 to remove and 35 not upgraded.

response.

Pic 15 - Packages need to be upgraded.

7. To upgrade the packages, type into the Terminal the command line, see Pic 16:

sudo apt-get upgrade

then press the Enter button.

The list of packages needing upgrade will be listed, see Pic 17.

Pic 16 - Refer to Step 7. Upgrading the necessary packages.

Pic 17 - Refer to Step 7. The list of packages needing an upgrade.

8. When asked, see Pic 18:

Do you want to continue [Y/n]?

Type in:

y

to continue the removal process then press the Enter button.


Type in:

n

to quit the removal process then press the Enter button.


The removal process is done when the line (user@computer:~$), see Pic 14:

aisha@Lenovo-Aisha:~$

appears.

Pic 18 - Refer to Step 8. Confirming the upgrading process.

Part B: Update using the Update Manager

Pic 19 - The Update Manager window.

9. Run the Update Manager window.


9.1. Go all the way to the left of the screen to call-out the Launcher. Skip this step if your Launcher is not auto-hidden.


9.2. In the Launcher, click the Dash Home icon, see Pic 2 and Pic 20.

Pic 20 - Refer to Step 9.2. Accessing the Update Manager window.

9.3. In the Search field, type-in "update", see Pic 20.

The search results will auto-filter.


9.4. In the filtered results, click the Update Manager icon, see Pic 21.

The Update Manager window will appear, see Pic 19.

Pic 21 - Refer to Step 9.4. The Update Manager icon.

10. In the Update Manager window, click the Check button to check for updates, see Pic 22.


Pic 22 - Refer to Step 10. *No updates at the moment to make screenshot.*


11. A tick mark is automatically put in the box next to the updates.

Click the Install Updates button to install the updates, see Pic 23.


Pic 23 - Refer to Step 11. *No updates at the moment to make screenshot.*



Note 3: Pinning the Update Manager to the Launcher

12. To "pin" the Update Manager icon in the Launcher, run the Update Manager. See Step 1.


13. Right-click the Update Manager icon in the Launcher, see Pic 24.

In the right-click menu, click Lock to Launcher.

Pic 24 - Refer to Step 13.

Wassalam.

Finally, Ubuntu 12.04 Precise Pangolin is on my laptop

18 Syawal 1433H, Ra.

Assalamualaikum warahmatullah.

I've upgraded to Ubuntu 12.04 Precise Pangolin! See Pic 1.

Pic 1 - See, see, see! Desktop screenshot.

This decision came after a suggestion from my cousin.

The first error i encountered was an internal error with my bluetooth.

The first tweak was to auto-hide the Launcher (Dash Home). Followed the steps, here:
How do I configure Unity 2D?
(http://askubuntu.com/questions/32667/how-do-i-configure-unity-2d)


Wassalam

How to setup the Squiggle browser + add an underline in Inkscape

21 Ramadan 1433H, Ju.

Assalamualaikum warahmatullah. Bismillahirahmanirahim.

Remember the Polaroid frame created using Inkscape Vector Graphics Editor? Read the post here:
Creating a Polaroid frame using Inkscape Vector Graphics Editor
(http://ubuntudigest.blogspot.com/2012/07/creating-polaroid-frame-using-inkscape.html)

I'm using the vector Polaroid frame for a mini project. In the project, some letters need to have an underline. As Inkscape does not provide an underline button, i thought of using underlined fonts instead. The DejaVu Sans font for example has some letters with underlines -- good, except that the letters i need aren't that some letters.

The simple trick of adding a horizontal line under the letters to act as the underline is a temporary workaround which can make the work tedious if the text is edited multiple times.

An online search will turn-up:

• many questions about how to add these underlines,

• some bug reports, and

• a way to add that underline.

The "missing" underline feature has already been reported. See the filed reports here:

• Bug #172133 (sf1796218): Implement SVG text-decoration - underline, strikethrough, etc. (17th Sep 2007)
  (https://bugs.launchpad.net/inkscape/+bug/172133)

• Question #90194: Questions: Inkscape: underline text (14th Nov 2009)
(https://answers.launchpad.net/inkscape/+question/90194)

The how-to-add-underline is taught here:
Inkscape: Guide to a Vector Drawing Program > Examples > Underlined Text
(http://tavmjong.free.fr/INKSCAPE/MANUAL/html/XML-Examples.html#XML-Examples-UnderlinedText)
which is also the first time i read about the Squiggle browser, see Pic 10. The webpage mentions that:

• Inkscape does not have an underline button to accompany the bold-normal weight button (see Pic 1) and italic-oblique style button (see Pic 2).

• The underline has to be added "manually" in Inkscape.
  Detailed steps are shown in Part E of this blog post.

• Even if an underlined text does exist in the SVG file (i.e., an SVG file imported from Wikipedia), Inkscape will display the text without the underline.

Pic 1 - The bold-normal weight button in Inkscape.

Pic 2 - The italic-oblique style button in Inkscape.

It might or might not be worth mentioning that i'm still using Ubuntu 11.10 Oneiric Ocelot even though Ubuntu 12.04 Precise Pangolin is available.



Part A: Installing the OpenJDK Development Kit package

The OpenJDK Development Kit package, see Pic 3, is installed as mentioned in the Apache Batik website:

Make sure a Java Development Kit (JDK) is installed on the computer where Batik will be installed.

Source: Installing Batik > Choosing a distribution to download
http://xmlgraphics.apache.org/batik/install.html#distributions

Any attempt to launch the Squiggle browser without a Java Development Kit (JDK) installed will give you a "notification" like in Pic 4.

Pic 3 - Summary of the OpenJDK Development Kit (JDK) package in Ubuntu Software Center.

Pic 4 - Launching the Squiggle browser without a Java Development Kit (JDK) installed -- unsuccessful.

1. Run Ubuntu Software Center.


2. In the search field, type-in the search term:

java development kit

The search results will auto-filter. See Pic 5.

Pic 5 - Refer to Step 2. The search results for the search term "java development kit".

3. Click on the package, see Pic 5:

OpenJDK Development Kit (JDK)
openjdk-7-jdk

The More info button and Install button will appear.


4. To read a short summary about the package or see the list of offered Add-ons as shown in Pic 3, click the More info button.

1. To install the add-ons, put a tick in the box next to the add-ons.
   Then click the Apply changes button.


2. The Authenticate window, see Pic 6, will appear.
   Type-in your password in the Password field.
   Then click the Authenticate button.


3. Give the download and install process some time to complete.

To install straight away, click the Install button.

1. The Authenticate window, see Pic 6, will appear.
   Type-in your password in the Password field.
   Then click the Authenticate button.


2. Give the download and install process some time to complete.

Once the download and install process is completed, Ubuntu Software Center can be closed.

Pic 6 - Refer to Step 4. The Authenticate window.

Note-1: The xml.apache.org SVG Library package in Ubuntu Software Center

In Ubuntu Software Center, if you search using the search term "squiggle", there is one search result, see Pic 7:

xml.apache.org SVG Library
libbatik-java

After some try-and-error, not only do i not know how to use this package, i am thinking that this package is the source of the "access denied" error, see Note-2. Thus i have removed the installed package from my system after having success with Part B.

If you're in doubt, go find some more information to be sure.

Pic 7 - Refer to Note-1. Summary of the xml.apache.org SVG Library package in Ubuntu Software Center.



Note-2: The access denied error from the Squiggle browser

There are reports and forum threads about the "access denied" error. The error appears in the ERROR window, see Pic 8:

SVG Error:
access denied ("java.io.FilePermission" "/usr/share/java/batik-squiggle-1.7.jar" "read")

The ERROR window appears while the loading bar is still progressing in the splash screen, see Pic 9. Once the ERROR window appears, the loading process stops.

After tweaking around, i think the possible reason for this error is the directory from which the Squiggle browser is launched. i could still be wrong though. Compare the directory in Pic 8 with Pic 15.

The workaround for the problem is explained in Part B.

Pic 8 - The "access denied" error. Notice the directory then compare it with Pic 15.

Part B: How to "install" and run the Squiggle browser

The Squiggle browser, see Pic 10, was built specially for displaying SVG files. Read here for more information about the browser:
Squiggle, the SVG Browser
http://xmlgraphics.apache.org/batik/tools/browser.html

Pic 9 - Splash screen of the Squiggle browser for Batik 1.7.

Pic 10 - The Squiggle browser for Batik 1.7.

5. Download the Batik toolkit, here:
Download Batik > Download a distribution
http://xmlgraphics.apache.org/batik/download.cgi#Download+a+distribution

i chose the:

Binary distribution for JRE 1.4+
batik-1.7.zip

and downloaded the toolkit zip file into my Downloads folder. In the downloaded toolkit is Squiggle, the SVG browser.

So, what is Batik?

Batik is a Java-based toolkit for applications or applets that want to use images in the Scalable Vector Graphics (SVG) format for various purposes, such as display, generation or manipulation.

Source: Batik SVG Toolkit > Overview
http://xmlgraphics.apache.org/batik/#overview

A brief description about the tools in the toolkit is provided here:
About the tools
http://xmlgraphics.apache.org/batik/tools/index.html


6. Open the Downloads folder.

Right-click anywhere in the folder, see Pic 11.

In the right-click menu choose Open in Terminal.

Pic 11 - Refer to Step 6. Running the Terminal from within the Downloads folder.

7. Unpack (extract) the toolkit by typing into the Terminal this command, see Pic 12:

jar xvf batik-1.7.zip

Source: Installing Batik > Choosing a distribution to download
(http://xmlgraphics.apache.org/batik/install.html#distributions)

Then press the Enter button.

A new folder named batik-1.7 will be automatically created in the Downloads folder. See Pic 13.


By the way:

• the keyboard shortcut to paste into the Terminal is: Ctrl+Shift+V

• the keyboard shortcut to copy from the Terminal is: Ctrl+Shift+C

Pic 12 - Refer to Step 7. Unpacking the toolkit using the Terminal.

Pic 13 - Refer to Step 7. The new folder, batik-1.7, is created in the Downloads folder after unpacking the batik-1.7.zip file.

8. Open the batik-1.7 folder.

Right-click anywhere in the folder, see Pic 14.

In the right-click menu choose Open in Terminal.

Pic 14 - Refer to Step 8. Running the Terminal from within the batik-1.7 folder.

9. Run the Squiggle browser by typing into the Terminal this command, see Pic 15:

java -jar batik-squiggle.jar

Source: Squiggle, the SVG browser > Starting the browser > Starting the browser for the binary distribution
(http://xmlgraphics.apache.org/batik/tools/browser.html#starting-binary)

The browser should open without any "access denied" error.

The splash screen, see Pic 9, will appear first followed by the browser, see Pic 10.

Pic 15 - Refer to Step 9. Running the Squiggle browser using the Terminal.

Note-3: Running the Squiggle browser, next time

The next time you need to run Squiggle, simply follow Step 8 and Step 9.



Part C: Viewing an SVG file in the Squiggle browser

Pic 16 - Viewing an SVG file downloaded from the Malay Wikipedia in Squiggle.

10. Supposing you don't have any SVG files at the moment, go download any SVG file from Wikipedia. Skip this step if you already have an SVG file.


10.1. I used this file:
Fail:Jenis darah ABO.svg - Wikipedia Bahasa Melayu, ensiklopedia bebas
(http://ms.wikipedia.org/wiki/Fail:Jenis_darah_ABO.svg)

For the English version:
File:ABO blood type.svg - Wikipedia, the free encyclopedia
(http://en.wikipedia.org/wiki/File:ABO_blood_type.svg)


10.2. Click anywhere on the file ("picture").

The URL of the webpage will be something like this:
http://upload.wikimedia.org/wikipedia/commons/a/a0/Jenis_darah_ABO.svg


10.3. Depending on your Internet browser, click File > Save Page As... . See Pic 17.

The Save As window will appear. See Pic 18.

Pic 17 - Refer to Step 10.2. Saving the SVG file from the Malay Wikipedia.

10.4. In the Save As window, give the file a location then click the Save button. See Pic 18.

i saved the file in my Downloads folder.

Pic 18 - Refer to Step 10.4. Saving the SVG file from Wikipedia.

11. Run the Squiggle browser. See Note-3.


12. In the Squiggle browser, click File > Open File... . See Pic 19.

The Open window will appear. See Pic 20.

Pic 19 - Refer to Step 12. Accessing

13. In the Open window, see Pic 20:

Pic 20 - Refer to Step 13. Opening the SVG file in Squiggle.

13.1. In the Look in section, navigate to the folder containing the SVG file.


13.2. Select the SVG file.


13.3. Then click the Open button.

The SVG file will be loaded in Squiggle. See Pic 16.



Part D: How to export (convert formats) using the Squiggle browser

14. Continuing directly from Step 13.

Click File > Export As >

• PNG...

• JPEG...

• TIFF...

Choose the raster format. See Pic 21.

Pic 21 - Refer to Step 14. Exporting the SVG file into a raster format.

14.1. Say, you are exporting the SVG file as a PNG file.

Click File > Export As > PNG... . See Pic 21.

The Export as PNG window will appear. See Pic 22.

In the Export as PNG window:

• give the file a location, and

• a name.

Then click the Save button.


The Write 256 color PNG? window will appear. See Pic 23.

• To accept the change, put a tick in the box then click the OK button.

• To not accept the change, click the OK button.

Check the PNG file in the folder.

Pic 22 - Refer to Step 14.1. The Save as PNG window.

Pic 23 - Refer to Step 14.1.The Write 256 color PNG window.

14.2. Say, you are exporting the SVG file as a JPEG file.

Click File > Export As > JPEG... . See Pic 21.

The Export as JPG window will appear. See Pic 24.

In the Export as JPG window:

• give the file a location, and

• a name.

Then click the Save button.


The JPEG Quality window will appear. See Pic 25.

In the JPEG Quality window, slide the slider to a number to choose the quality of the JPEG file. Then click the OK button.

Check the JPEG file in the folder.

Pic 24 - Refer to Step 14.2.

Pic 25 - Refer to Step 14.2.

14.3. Say, you are exporting the SVG file as a TIFF file.

Click File > Export As > TIFF... . See Pic 21.

The Export as TIFF window will appear. See Pic 26.

In the Export as TIFF window:

• give the file a location, and

• a name.

Then click the Save button.

Check the TIFF file in the folder.

Pic 26 - Refer to Step 14.3.

Part E: How to add an underline in Inkscape

Pic 27 - Comparing how the SVG file is displayed. The "la" in Selamat and the first "i" in Aidilfitri is underlined which are displayed correctly in the Squiggle browser and Chromium browser.

• Top-left: Image Viewer.

• Top-right: Squiggle browser.

• Bottom-left: Chromium browser.

• Bottom-right: Mozilla Firefox browser.

Selamat Hari Raya Aidilfitri loosely translates as Happy Great Day of Eid ul-Fitr.

Maaf Zahir dan Batin loosely translates as Sorry Physically and Spiritually.


Malay (Bahasa Melayu) --> English

• selamat  -- happy / safe

• hari -- day

• raya -- big / grand day / public / common

• Aidilfitri -- Eid ul-Fitr

• maaf -- sorry / apologize

• zahir -- corporeal / physically

• dan -- and

• batin -- incorporeal / spiritually

This might be a worthy read by the way:
Text -- SVG 1.1 (Second Edition)
(http://www.w3.org/TR/SVG/text.html)


15. Run Inkscape Vector Graphics Editor.


16. Click the Text Tool icon, see Pic 28, which is in the left-hand side toolbar.

Pic 28 - Refer to Step 11. The Text Tool icon in Inkscape.

17. Click the cursor on the canvas to add text. Then type-in/paste your text.

Do not click-hold-drag as a way to add text. See Note-4.


18. This step is done as taught here:
Inkscape: Guide to a Vector Drawing Program > Examples > Underlined Text
(http://tavmjong.free.fr/INKSCAPE/MANUAL/html/XML-Examples.html#XML-Examples-UnderlinedText)


18.1. Highlight the text that needs an underline.


18.2. Change the color of the selected text by simply clicking a color in the row of colors at the bottom of the window. This change-color step is temporary.

The purpose of this step is to create the <svg:tspan> tag in the XML Editor, which is the easiest way to do. See Pic 30.


18.3. Open the XML Editor.

Click Edit > XML Editor... . See Pic 29.

The XML Editor (Shift+Ctrl+X) window will appear. See Pic 30.

Pic 29 - Refer to Step 18.3.

18.4. In the XML Editor (Shift+Ctrl+X) window, see Pic 30, expand the <svg:text> node by clicking on the small triangle.

Expand the <svg:tspan> nodes below it to look for the to-be-underlined text.

When you've found the to-be-underlined text, click its <svg:tspan> node.

Then click the style Attribute in the upper window.

Add this to the style Value in the lower window:

text-decoration: underline

Press the Ctrl+Enter button to apply the changes.

Close the XML Editor window.

Pic 30 - Refer to Step 18.4. Adding the underline text-decoration in the XML Editor.

18.5. After you are done editing, save the file as Plain SVG.

Click File > Save As... . See Pic 31.

The Select file to save to window will appear. See Pic 32.

In the Select file to save to window, give the file:

• a name

• a location

• the Plain SVG (*.svg) format

Then click the Save button.

Pic 31 - Refer to Step 18.5.

Pic 32 - Refet to Step 18.5.

18.6. View the Plain SVG file in Squiggle, refer to Part C. See Pic 27.



Note-4: Black rectangles instead of text in Inkscape

Look at the icon of your SVG file. If your text turns out as black rectangles in the icon, you will need to change your text-adding technique.

Click-hold-drag to create a text area will give black rectangles the size of the text area itself.

Simply click and type-in the text instead. Let the area automatically adjust itself while typing.

The black rectangles effects:

• the icons of the SVG files, and

• viewing SVG files in Squiggle

but it won't effect the raster output.



Part F: Validating your Plain SVG file

Pic 33 - Screenshot of The W3C Markup Validation Service > Validate by file upload website.

So you have created an SVG file and want to share it on the Internet, say, Wikipedia. Although the file is displayed error-free in Squiggle it is best to validate (i.e., check for errors) the Plain SVG file before uploading. Go here, see Pic 33:
The W3C Markup Validation Service > Validate by file upload
(http://validator.w3.org/#validate_by_upload)

If you get a green, see Pic 34, the file is [Valid]. This means the file is ready to be shared.

If you get a red, see Pic 35, the file is [Invalid]. This means there are errors in the file which needs to be corrected.

If you get a red but are confident that it should be a green, do a bug search to confirm. This is one of the known bugs about the validator:
[Bug 16272] New: Use of foreign namespace in SVG marked as invalid. (8th Mar 2012)
(http://lists.w3.org/Archives/Public/www-validator-cvs/2012Mar/0017.html)

Pic 34 - Green and [Valid]. The file from Step 10.1.

Pic 35 - Red and [Invalid]. The file from Part E.

Wassalam.