Styling Parts of Speech

A benefit of learning any particular language is the power that it gives one with languages in general. This can improve the use of ones native language as well as developing methods of learning and working with new ones. I suspect that this theme will come up several times over the development of our tools this term.

Our first project is having students apply styles to each individual word based on parts of speech. This will allow us, for example, to color every verb a certain color or having an singular adjective underlined only when it proceeds a plural now. The process of developing the tools for this will lead, I suspect, to a deeper understanding of idea construction in all languages.

Esperanto is an especially appropriate language for this purpose as part-of-speech is encoded by word endings. In addition, the lack of irregularities makes the parsing logic trivial.

An additional benefit of having this be part of our first project is that it encourages a core web-design principal of separating the semantic elements of the document into HTML5 and the appearance as described in the CSS3 style sheets. The project can also drive the need for the interactive elements of the project using jQuery for changing style and highlighted elements dynamically.

Overall the students were successful with this first phase of the project as each student was able to build pages based on the sample code. They also began the process of overriding the site-wide style-sheet with their own creations although more instruction and coding time needs to be spent on the whole idea of the CSS3 language to help students move beyond the provided code.

Below is the sample starting code based on the site’s evolving stylesheet found at

<!DOCTYPE html>
        <link rel="stylesheet" href="" />
        <link rel="stylesheet" href="style.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <div id="container">
        <h2><span title="the" class="pos-baz">La</span> <span title="new" class="pos-a">nova</span> <span title="list" class="pos-o">listo</span>!</h2>
            <li ><span title="am (is are)" class="pos-as">estas</span></li>
            <li ><span title="horse" class="pos-o">ĉevalo</span></li>
            <li><span title="and" class="pos-baz">kaj</span></li>

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s