Pango

From OLPC
Revision as of 13:11, 16 July 2008 by Fanwar (talk | contribs)
Jump to: navigation, search

Pango is "the core text and font handling library used in GNOME applications. It has extensive support for the different writing systems used throughout the world."<ref>Pango Reference Manual</ref>. The end of this section points to some standard documentation of Pango that should help you walk through most of what you want to do. We will simply discuss a few representative examples to help you get started in using Pango to display text in your activity.

How do I create a simple canvas that can render fonts using Pango?

Pango is built upon several other technologies, most notably gtk and Cairo. So to get pango working, you have to do a little coordinating between all of these players. The code below shows how I first create an extension of a gtk.DrawingArea class that will render Pango text. Then, I add this drawing area to a specific part of my UI (the first page in my main activity notebook widget).

#-----------------------------------FILE: TextWidget.py ----------------------------------------
import gtk

from gtk import gdk
import cairo
import pango

class TextWidget(gtk.DrawingArea):

	def __init__(self):
		
		gtk.DrawingArea.__init__(self)

		self.layout = None

		self.connect("expose_event", self.expose_cb)
		self.set_size_request(450, -1)


	#The expose method is automatically called when the widget
	#needs to be redrawn
	def expose_cb(self, widget, event):
		
		#create a CAIRO context (to use with pango)
		self.context = widget.window.cairo_create()

		#clip anything outside the drawing rectangle
		self.context.rectangle(event.area.x, event.area.y, event.area.width, event.area.height)
		self.context.clip()

		#create a pango layout and set its text
		self.pango_context = self.create_pango_context()
		self.layout = pango.Layout(self.pango_context)
		self.layout.set_wrap(pango.WRAP_WORD)
		self.layout.set_width(500*pango.SCALE)
		self.layout.set_font_description(pango.FontDescription('Serif 14'))		
		self.layout.set_markup('<span foreground=\"blue\">This is some sample markup</span> <sup>text</sup> that <u>is displayed with pango</u>')

		self.context.show_layout(self.layout)


#-----------------------------------FILE: TextWidget.py ----------------------------------------
    #### Method: _createCanvas, creates a top level canvas object for this activity
    def _createCanvas(self):
        top_container = Notebook()
        
        #Create pages for the notebook
        first_page = gtk.VBox()
        #Create a TextWidget object that can display pango markup text and add it to the first page
        tw = TextWidget()
        first_page.pack_start(tw)

        second_page = gtk.VBox()
        third_page = gtk.Frame()

        #Add the pages to the notebook. 
        top_container.add_page('First Page', first_page)
        top_container.add_page('Second Page', second_page)
        top_container.add_page('Third Page', third_page)
        return top_container


Notes

<references />