Text is scaled, how do I undo this?

Question

Because of the parent the text become also be scaled. How can I fix this? The formula 1/a (a=scale factor) doesn't work.

http://codepen.io/anon/pen/yYxpaj

<div class ="rhombus"><p>text</p></div>

p {
  color: white;
  transform: scaleY(1.7391304) rotate(-45deg) ; 
  font-size: 30px;
}


.rhombus {
  width: 27vw;
  height: 27vw;
  margin: -2vw 6.5vw;
  background: #000;
  transform: scaleY(.575) rotate(45deg) ;
}

I also want the text inside the rhombus and not outside of it, but the transform makes that not possible.

Does this http://stackoverflow.com/a/9513671/99256 answer your question? — MartyIX, Nov 05 '15 at 14:50
@MartinVseticka I think that's what he had tried, but made a slight mistake on the reverse transformation. — Cedric Reichenbach, Nov 05 '15 at 14:54

score 4 · Accepted Answer · answered Nov 05 '15 at 14:52

4

Your problem is the order of those operations. If you scale before rotating, the text will scale into a wrong direction (by 45 degrees), so just swap scaleY(1.7391304) and rotate(-45deg), leading to

p {
  color: white;
  transform: rotate(-45deg) scaleY(1.7391304); 
  font-size: 30px;
}

Updated example

answered Nov 05 '15 at 14:52

Cedric Reichenbach

8,970
6
54
89

Good and fast eyes :) – Marcos Pérez Gude Nov 05 '15 at 14:55
Thanks! And is there a way to put multiple text in the shape? Because now it's in the shape without the transform (rectangle) : http://codepen.io/anon/pen/rOZJZL – Nboy Nov 05 '15 at 15:48
Not sure what you mean... I updated the example, do you mean something like this? – Cedric Reichenbach Nov 05 '15 at 15:53
No this: http://codepen.io/anon/pen/dYqdrd. Now I have to use
to break every time, is there another way to do it easier? – Nboy Nov 05 '15 at 15:58
The cleanest way would be using CSS [clip-paths](https://developer.mozilla.org/en/docs/Web/CSS/clip-path), but it's not widely supported by browsers yet. As a workaround, you could make sure the inner element is small enough to remain fully inside the parent one, but you will end up with an upright border. If manually defining lines is feasible, you could at least align them with one of the slant borders: http://codepen.io/anon/pen/RWYMwe – Cedric Reichenbach Nov 05 '15 at 16:10
Yes I think clip paths is the best way. You say it's not widely supported, but on internet I see support for any browser? See https://css-tricks.com/almanac/properties/c/clip/. And what about shape-inside? – Nboy Nov 05 '15 at 16:27
This one is the deprecated `clip`, not `clip-path`. See here: http://caniuse.com/#feat=css-clip-path – Cedric Reichenbach Nov 06 '15 at 15:58

Text is scaled, how do I undo this?

1 Answers1