Search code examples
htmlcsswebkitflipmirroring

Controlling position of the CSS mirrored text

Using code from the answer to this question I managed to mirror text but now it's out of the flow of normal text.

<style>
span.flip {
        display: block;
        -moz-transform: scaleX(-1); /* Gecko */
        -o-transform: scaleX(-1); /* Operah */
        -webkit-transform: scaleX(-1); /* webkit */
        transform: scaleX(-1); /* standard */
        filter: FlipH; /* IE 6/7/8 */
    }
</style>

<p>Some text <span class="flip">mirror</span> and more tex</p>

How can I keep the mirrored text from breaking out from the normal text flow? Which properties control position of the mirrored text?

Solution

  • Add display: inline-block; this will make it all in one line:

    <style>
span.flip {
        display: inline-block;
        -moz-transform: scaleX(-1); /* Gecko */
        -o-transform: scaleX(-1); /* Operah */
        -webkit-transform: scaleX(-1); /* webkit */
        transform: scaleX(-1); /* standard */
        filter: FlipH; /* IE 6/7/8 */
    }
</style>

<p>Some text <span class="flip">mirror</span> and more text</p>​

    If you want it on a different line, use this: 

    <style>
span.flip {
        display: block;
        -moz-transform: scaleX(-1); /* Gecko */
        -o-transform: scaleX(-1); /* Operah */
        -webkit-transform: scaleX(-1); /* webkit */
        transform: scaleX(-1); /* standard */
        filter: FlipH; /* IE 6/7/8 */
        width: 36px; 
    }
</style>

<p>Some text <span class="flip">mirror</span> and more text</p>​