Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Trying to rotate a text box in Google Sites

jackobean

New Coder
Hi there.

I need to write some code that will enable me to display a block of text upside down on a website made in Google Sites. I don't want the individual words or letters to be upside down; I need a whole block of text to be rotated 180˚, like if you had a text box in Microsoft Word and rotated it.

I've tried using the rotateZ() function in CSS, and it successfully rotates the text. However, I'm having a couple problems:

1. In the preview on the site, it keeps putting the text in a small box with a scrollbar on the side, so that when you look at it, not all the text shows up—you have to scroll through it to see the whole rotated text. I want all the text to show up, no scrolling.

2. I can't get the font in the flipped text to match the font on the rest of the page. I need it to be Lato, 14pt.

Here's the code I've been using. (I put 14 lines of "BLAH BLAH" etc. as a placeholder for the text using.) As is probably apparent, I'm an absolute rookie at CSS; I'm trying to teach it to myself just for the purpose of this project. Any help or suggestions would be greatly appreciated!!

Code:
<!DOCTYPE html>
<html>
    <head>
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>   
        <style>
            .rotated {
                transform: rotateZ(180deg);
            }
            h1 {
                font-family: 'Lato', sans-serif;
                font-weight: 400;
            }
        </style>
        <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="rotated">
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
    </div>
  </body>
</html>
 
Hi @jackobean

1. In the preview on the site, it keeps putting the text in a small box with a scrollbar on the side, so that when you look at it, not all the text shows up—you have to scroll through it to see the whole rotated text. I want all the text to show up, no scrolling.
Is it only in the preview? Try overflow: visible;

2. I can't get the font in the flipped text to match the font on the rest of the page. I need it to be Lato, 14pt.
If that is all your css for .rotated, then you haven't even given it the font-family and font-size, so it's not going to get the family and size you want.
 
Hi @jackobean


Is it only in the preview? Try overflow: visible;


If that is all your css for .rotated, then you haven't even given it the font-family and font-size, so it's not going to get the family and size you want.
Hi Johna,

Thanks so much for the help. I've managed to fix the font problem—hooray!

However, I'm still having the issue with the scrollbar. It does show up only in the preview, yes. And it looks different in the desktop/tablet/mobile previews. I can get it so it shows all the text on the desktop preview, but then when I switch it to mobile or tablet, the frame is becomes smaller and only some of the text appears.

From the research I've done, it seems like what might be happening is that when you add code to a Google Site, it creates an iFrame. And the iFrame is the frame with the scrollbar that I can't get to be the right size for the content. Does that seem correct?

Per your suggestion, I tried adding overflow: visible; but it didn't seem to help. Although which part of the CSS should I add it to?

Here's my revised code.

Code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <style>
      * {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    box-sizing: border-box;
      }
      .rotateZ {
        font-size: 14pt;
        transform: rotateZ(-180deg);
      }
    </style>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
</head>
  <body>
    <div class="rotateZ">
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
    </div>
  </body>
</html>
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom