CODEWITHSUNDEEP
htmlcsscross-browser
Sgt Oddball
Sgt Oddball

Reputation: 89

Upside down text consitent across browsers

I've been looking at inverting a single character in a line of text using CSS rather than an image but everytime I get the css to work correctly and inline in one browser, the letter is usually 1/2px out of line in others (this goes for Firedfox 45, Edge and chrome).

So far I've got

<style>
  @import url(https://fonts.googleapis.com/css?family=Droid+Serif);
  * {font-family:"droid serif"}
  div {position:relative; float:left; display:inline-block }
  div h1 { margin:0; font-size:3em; position:relative; }
  div h1.invert { float:left; transform: scale(-1,-1); 
  /* Also tried 
  div h1.invert { float:left; transform:rotate(180deg);}
  */
</style>

<div>
  <div>
    <h1>THI</h1>
  </div>
  <div>
    <h1 class="invert">S</h1>
  </div>
</div>

Obligatory fiddle.... https://jsfiddle.net/1q9jbuf8/

Upvotes: 0

Views: 727

Answers (1)

Siderite Zackwehdex
Siderite Zackwehdex

Reputation: 6570

The problem here is not the actual letter, but the spacing inside the font. You can check this by using $('.invert')[0].getClientRects()[0] and then applying your transform and checking again. If anything, the only thing that changes is the horizontal position.

I see no way of solving this without drawing the text on a canvas, determining the actual rectangle with pixels, then rotating only that. Maybe someone else has a better solution, but the only reasonable one should be individual fixes for fonts and sizes you can control (like adding position:relative; top: 1px;)

I played around with it for a while: https://jsfiddle.net/v06j5hz0/6/

There I simplified the inverted model (BTW: inverted means rotateX, not rotate) and I am displaying the actual rectangle sizes, positions and so on. Unfortunately, other than being aware of the actual font and size and updating the transform-origin point, I have no solution.

Upvotes: 2

Related Questions