Yoga Asana Practice Sequences meet WordPress & HTML

I’ve been gradually looking for better ways to display and communicate asana and practice sequences:

1. It started with some basic hand drawings which were clumsy because I had to use a marker instead of a fine pen to get a result that would scan and display properly on screen.
2. I’ve described some asana in depth with photographs and animation.
3. At one point I started drawing some stick figures.
4. I then began aggregating stick figures into practice sequences.
5. Until a few days ago, as I was working on documenting another sequence and I began to think “there has to be a better way to do this”.

Well I’m happy to say that now there is. I’ve used a semantic (predefined) structure of HTML together with some CSS and Javascript that arange and transform the HTML text into a visual practice sequence. It uses a set of images (which can be enriched and modified regardless of the script) which are inserted instead of the posture names (which are actually the file names). You would need a basic understanding of HTML tags to use it.

It’s not as user-friendly as it could be and I have some ideas on how to enhance it and make it easier to use – but implementing that goes beyond my programming skills. So if you’re a WordPress plugin author with experience in Javascript – please do contact me – I’d love to work with you on this.

Here’s an example of how it works. Following is an image of a practice sequence – it is one large JPG file:

Next is a semantic HTML representation of that practice. If you understand Yoga and basic HTML structuring then you should be able to quickly see the underlying structure – I’ve kept it fairly simple:

	

		

			
samasthiti
			
breath-inex
			
tadasana
		
		

			
r3
		
	
	

		

			
samasthiti
			
breath-inex
			
tadasana_v-backbend
		
		

			
r3
		
	
	

		

			
samasthiti
			
breath-inex
			
tadasana
			
breath-exin
			

				

					
uttanasana
					
breath-inex
					
ardha-uttanasana
					
breath-exin
					
ardha-uttanasana
				
				

					
midrange-micromovement-static
				
			
		
		

			
r3
		
	

And here’s how that code is rendered with CSS and a Javascript:

If images are not showing – refreshing the page may correct it!

The benefits:

• Easy: very easy and quick authoring of practice sequences.
• Green: each posture is a very small file (as opposed to larger images with whole practice sequences) – resulting in a small and lightweight page.
• Adapatable: alternate image sets could be used for different representations of the same practice: stick figures, photos, body illustrations, male, female, etc.
• Scalable: the script can be configured for automatic scaling/resizing of images.
• Printable?: I haven’t tested this yet – but I have created high (print resolution) graphics which are scaled down by the script. Zooming in reveals that the images are indeed on high resolution and so I have a feeling they may print well too.

There are still a few issues to tweak and finalize – but is does work 🙂

Thanks: To create this I had to use Javascript which I haven’t used in quite some time – I hate it as a programming language and I love what it can do. I was motivated to use it again (a disturbing and aggravating learning curve) by the inspiration I experienced in helping my teacher move into WordPress. Thank you Paul, again and again, for your inspiring presence.

Note: I haven’t and probably won’t test or maintain this script for Internet Explorer (any version – old or new). It was developed with and works with Mozilla Firefox. If you are a Yoga practitioner and can relate to Svatantra then I recommend you stop using Internet Explorer and start using an open-source browser like Firefox and other open-source applications.