How to rotate text direction using JavaScript and CSS

Question

How to rotate text direction using JavaScript and CSS

Despite my extensive efforts, I have been unable to find a solution to a seemingly simple problem.

In JavaScript, I have generated dynamic text using the following code:

    context.fillText('name', 10, 10, 20);

Now, I need this text to be oriented vertically. However, rotating the entire canvas is not an option as there are other objects within it that should remain unchanged.

An ideal solution for me would involve using CSS. This way, I can easily apply attributes like angle and color to multiple texts on the canvas. Unfortunately, my limited knowledge of CSS has left me struggling to create and reference such styling in-line with JavaScript.

I came across a link similar to what I'm looking for: CSS rotate text - complicated. However, this example assumes the text in HTML has a specific name tag for referencing, which mine does not. This constraint has left me feeling quite stuck in this situation.

javascript css

Answer 1

Answer №1

To specify the transformation only on text, you have the option to employ save() and restore():

c = canvas.getContext("2d");
c.save(); // save the current styles and transformations
c.translate(20, 50); // shift origin to (20, 50)
c.rotate(-Math.PI / 2); // rotate 90 degrees counterclockwise around origin
c.fillText("name", 0, 0); // plot text vertically
c.restore(); // revert back to previous styles and transformations

Check out the demo here: http://jsfiddle.net/chtJ2/

Answer 2

To specify the transformation only on text, you have the option to employ save() and restore():

c = canvas.getContext("2d");
c.save(); // save the current styles and transformations
c.translate(20, 50); // shift origin to (20, 50)
c.rotate(-Math.PI / 2); // rotate 90 degrees counterclockwise around origin
c.fillText("name", 0, 0); // plot text vertically
c.restore(); // revert back to previous styles and transformations

Check out the demo here: http://jsfiddle.net/chtJ2/

Answer 3

Answer №2

Here is an idea:

.fillText {
     -moz-transform: rotate(7.5deg);  
       -o-transform: rotate(7.5deg);  
  -webkit-transform: rotate(7.5deg);  
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); 
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
}

Answer 4

Here is an idea:

.fillText {
     -moz-transform: rotate(7.5deg);  
       -o-transform: rotate(7.5deg);  
  -webkit-transform: rotate(7.5deg);  
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); 
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
}

How to rotate text direction using JavaScript and CSS

Answer №1

Answer №2

Similar questions

The troubleshooting of debugging javascript remotely on IntelliJ with the JetBrains Chrome extension is proving to be unsuccessful

Extract data from nested JSON and populate a list with corresponding values

Using ng-pattern to validate that a text field does not conclude with a particular term

Error message: The function s.t.match is not defined in the context of react-export-excel

Implementing Ideone API functionality on Codeigniter with the use of ajax, javascript, and soapclient

Express.js experienced a 404 error when processing POST requests

Leveraging the jQuery live() function to optimize heavy usage of Ajax on a website

The behavior of Quasar's q-drawer is quite unpredictable

emailProtected pre-publish: Running `python build.py && webpack` command

Send key-value pairs to the function using ng-model

Ways to verify if the flash plugin has been disabled in the Chrome browser

Confusion about the unwinding of the call stack in the Graph Depth-

Accessing a JavaScript variable in another <script> section

Alert: Route.get() is requesting a callback function, but is receiving an [object Undefined] while attempting multiple exports

When linking to a section, the Bootstrap navbar obscures the top part of

How to automatically insert a page break after a certain string in an array using JavaScript

The sidebar stays fixed in place and doesn't adapt to varying screen resolutions

Tips for adjusting the color of the sidebar in an HTML email template

Obtaining essential data while facing a redirect situation

creating a form layout with inline buttons