| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset=utf-8> |
| <style> |
| body { |
| font: 36px sans-serif; |
| } |
| div { |
| text-align: center; |
| } |
| .a { |
| display: inline-block; |
| width: 10px; |
| } |
| .c1 { |
| padding-left: 10px; |
| } |
| .c { |
| color: red; |
| } |
| .d1 { |
| margin-right: 10px; |
| } |
| .d { |
| color: red; |
| } |
| </style> |
| </head> |
| <body> |
| <div dir=ltr> |
| السلام<span class=a> </span>عليكم |
| </div> |
| <div dir=ltr> |
| السلام<span class=a> </span>عليكم |
| </div> |
| <div dir=rtl> |
| السلام<span class=a> </span>عليكم |
| </div> |
| <div dir=rtl> |
| السلام<span class=a> </span>عليكم |
| </div> |
| <div dir=ltr> |
| <span class=c1>السلام<span class=c>عليكم</span></span> |
| </div> |
| <div dir=ltr> |
| <span class=d1><span class=d>السلام</span>عليكم</span> |
| </div> |
| <div dir=rtl> |
| <span class=c1>السلام<span class=c>عليكم</span></span> |
| </div> |
| <div dir=rtl> |
| <span class=d1><span class=d>السلام</span>عليكم</span> |
| </div> |
| </body> |
| </html> |