Teachers and programmers wanting to include Chinese characters and romanization side-by-side in HTML documents will find some difficulty. Characters with special tone or pitch marks are part of the extended ASCII character set. There is a standard set of 256 number codes that are universally excepted to mean the same thing in all platforms and programming languages. The extended set of codes is not as standardized and some codes are used to represent different things in different programs.
Programs that use Mandarin romanization use some of the same codes used for other special characters in the extended ASCII set. Some of these codes are different than the standard, and when converted to HTML they become garbled. Chinese code converters also read values from outside the standard 256 number range and change them into Chinese output. If tone marks are manually put into words using the extended ASCII characters in use with HTML documents, Chinese web browsing programs interpret the codes as Chinese characters. The result is that Chinese characters appear in the middle of words where special tone marks would appear.
One possible solution is to write either the Chinese characters, the romanization, or both using a graphics program (such as Photoshop or Paintshop Pro) and save the text you want to display as a graphics image. This can also be done by taking a "screenshot" of text in a word processor and then saving the characters as a graphic file. Although this may be a useful trick for a small amount of text, image load times make this method not a viable solution with long documents.