Adding tone marks to characters
I'm not quite sure what your question actually is. Do you want to know how:


to better teach Chinese tones? (cram specific tone recall quizzes)
to automate adding pinyin with diacritical marks to your text? (google, find e.g. annotator.jiang-long.com)
to use Ruby annotations in your typesetting environment? (which?)


If you use LaTeX, see e.g.: https://tex.stackexchange.com/questions/4448/tone-marks-above-chinese-characters-in-latex

You might also try combining Unicode characters with the program of your choice: http://en.wikipedia.org/wiki/Combining_character

The easiest solution to getting the tone marks out of pinyin is to use Regular Expressions. I have written a Javascript bookmark for you, which works with annotator.jiang-long.com:

javascript:(function(){var e,es,i;es=document.getElementsByTagName("acronym");for(i=0;e=es[i];i++){e.innerHTML=e.innerHTML.replace(/\w*[āɑ̄ēīōūǖĀĒĪŌŪǕ]\w*/g,' ˉ ').replace(/\w*[áɑ́éíóúǘÁÉÍÓÚǗ]\w*/g,' ˊ ').replace(/\w*[ǎɑ̌ěǐǒǔǚǍĚǏǑǓǙ]\w*/g,' ˇ ').replace(/\w*[àɑ̀èìòùǜÀÈÌÒÙǛ]\w*/g,' ˋ ');}})();


And an advanced version using XPath which also takes care of toneless pinyin:

javascript:(function(){var i,t,ts,e,at;at=parseInt(prompt("Which row is the pinyin in?",1))-1;ts=document.querySelectorAll( 'table.textblock' );for(i=0;t=ts[i];i++){e=t.querySelectorAll('acronym')[at];e.innerHTML=e.innerHTML.replace(/\w*[āɑ̄ēīōūǖĀĒĪŌŪǕ]\w*/g,' ˉ ').replace(/\w*[áɑ́éíóúǘÁÉÍÓÚǗ]\w*/g,' ˊ ').replace(/\w*[ǎɑ̌ěǐǒǔǚǍĚǏǑǓǙ]\w*/g,' ˇ ').replace(/\w*[àɑ̀èìòùǜÀÈÌÒÙǛ]\w*/g,' ˋ ').replace(/[^ˉˊˇˋ ]+/g,' · ').replace(/ /g,'&amp;nbsp;');}})();


Just create a new bookmark and past the Javascript as URL. It replaces any word containing an āíěòū etc. with the respective tone mark.
I picked annotator.jiang-long.com totally at random; you may need to adjust the code if you want it to work with your favorite annotator webservice.

Update: convert pinyin without tonemarks into dots