Is there CSS for typesetting the XeLaTeX logo in HTML?

Question

I want to use the XeLaTeX logo in HTML pages. I found the answer to a similar question regarding the LaTeX logo here: Is there CSS for typesetting the LaTeX logo in HTML?, but the XeLaTeX logo involves a mirrored E. Is there a trick to get this too?

Answer 1

You could use “Ǝ” U+018E LATIN CAPITAL LETTER REVERSED E to get a mirrored E, but it’s tricky and risky to do a character substitution with CSS.

So a better approach would be to uppercase the “e” and use a 3D transform. Considering just this part, the following code would work on sufficiently modern browsers:

<style>
.revcap {
display: inline-block;
text-transform: uppercase;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
X<span class=revcap>e</span>LaTeX