how to vertically stretch text

Ask the community
,
1


I want to vertically stretch text on my website so that it looks like a picture. Does anyone know how to do this? (I want to have it as real text)

2

Try to use the html property and set the height to 100% or 100vh.
$w('#text01).html = ‘<span height="100%> TEX HERE ’

3

Hi, thank you for your advice, I tried putting in the code you gave me but it made an error. Did I do something wrong? Excuse me for my minuscule knowledge of coding.

920×400 84 KB

4

@vikioh2588 first of all: 100vh means the full screen height and that not what you wanted to do. Second, you forgot to close the quotation mark. and third I’m not sure what exactly you’re trying to do (the image doesn’t clarify the purpose (try to explain it in words), but for sure you can’t just do it by adding a “height” attribute to a span tag ( doesn’t have this attribute).

5

Pls check this:
[https://www.wix.com/corvid/forum/community-discussion/set-strip-height-to-viewport-size](
https://www.wix.com/corvid/forum/community-discussion/set-strip-height-to-viewport-size

The)

6

@jonatandor35 I don’t know if this makes sense, but I trying to stretch the font vertically for visual purposes! So the word ‘approaching’ on the left of the image can look extended like in the right of the image. (whilst keeping it a real text) I suppose this shouldn’t be complicated but I normally don’t code so I don’t even have a basic knowledge :frowning:

3508×1000 102 KB

7

hi, I guess didn’t make it clear what I’m trying to do as it seems like the subject being discussed in the link isn’t what I’m trying to do. My reply to J.D. above may be explains it better. Could you check it out if you would be kind enough to help me out?

8

@vikioh2588 You can try something like:

	function strechText(){
		const scaleY = 10;//You can change the value
		return `-webkit-transform:scale(1,${scaleY});-moz-transform:scale(1,${scaleY});-ms-transform:scale(1,${scaleY});-o-transform:scale(1,${scaleY});transform:scale(1,${scaleY});`
	}
	$w("#text1").html = `<p style="${strechText()}">Hello</p>`;

It might not work in preview mode, but it should work on you live site

9

@jonatandor35 Thank you so much for your help! I think this is working. Plus sorry for the late reply

10

You’re welcome :slight_smile: