Avoiding word shuffling when writing English within Arabic text

When writing English text within a text that is set by default as right-to-left or visa versa, the sentences get shuffled when the text direction is reversed.

For instance, the sentence

يقدم موقع awzan.com أمثلة مسموعة على بحور الشعر العربي.

Will read
يقدم موقع awzan.com أمثلة مسموعة على بحور الشعر العربي.

The punctuation mark will go to the beginning of the line.

For instance

"وَجَعَلْنَا مِنَ الْمَاءِ كُلَّ شَيْءٍ حَيٍّ" (الأنبياء: 30).

Will be displayed in the following way

"وَجَعَلْنَا مِنَ الْمَاءِ كُلَّ شَيْءٍ حَيٍّ" (الأنبياء: 30).

I used to work around this problem by never ending a sentence with a punctuation mark, and by putting the English words on a separate line. For example:

يقدم موقع
awzan.com
أمثلة مسموعة على بحور الشعر العربي

The good news is that some email services (such as yahoo) are becoming smart in supporting rtl text, so when someone writes an email in rtl it is sent in Unicode and designated as rtl which supports the proper display of the Arabic text.

As for services that don't support this, such as this blog, which supports either Arabic or English but not both together, I have found a good way to display Arabic sentences by going into the HTML code and using the following code for Arabic sentences:

<div align="right" dir="rtl"> النص العربي </div>

This can also be done in a paragraph tag
<p align="right" dir="rtl"> النص العربي </p>