Vertical text in HTML with writing-mode:vertical-rl not working

Jonatan B.B.789

I am trying to style a HTML table cell to use vertical text orientation by adding "writing-mode: vertical-lr;" to the style tag.

This works as expected in the editor, as illustrated in the attached screenshot (shaded green cell).

However, if I save the changes by clicking 'Update', the styling appears to get stripped. See the second screenshot.

Does anyone know how to fix / work around this?

Thanks in advance!

brad.r.503

The issue you're experiencing is likely due to Brightspace's HTML content editor, which has built-in security measures that sometimes strip out certain CSS properties or HTML tags to maintain the system's integrity and consistency. This behavior can vary based on the system's configuration and the permissions of the user.

To address the issue of writing-mode: vertical-lr; being stripped out after saving, here are a few workarounds you can consider:

Using Supported Inline Styles:

Sometimes, certain CSS properties are supported inline but are stripped when included in <style> tags or in a CSS file. Try adding your style directly to the HTML element as an inline style if you haven't already.<td style="writing-mode: vertical-lr;">Your Text</td>

1. Check HTML Editor Configuration:
   • The behavior of the HTML editor and what tags or CSS properties are allowed can sometimes be configured by an administrator. You might need to contact your Brightspace administrator to inquire if writing-mode can be allowed or if there are any restrictions in place that could be adjusted.
2. Using Alternative CSS:
   • If writing-mode is not supported, you can try other CSS properties that might give a similar effect and are allowed by the editor. For instance, you might experiment with transform: rotate(90deg);, although this is not a direct replacement for writing-mode.
3. Embedding an External CSS File:
   • If inline styles don't work, another method is to link an external CSS file where your styles are defined. However, this is more complex and may also be subject to the same content filtering by Brightspace.
4. Contact Support for a Solution:
   • If the above methods don't work, I would recommend reaching out to Brightspace support or your institution's IT department. They might have a solution specific to the way Brightspace is set up at your institution or be able to change the configuration to allow for the styling you need.
5. Providing Feedback:
   • If this is a feature critical to your course's operation, providing feedback to Brightspace about this limitation might prompt them to consider changes in future updates.

While these workarounds might not directly solve the problem of the writing-mode being stripped, they offer alternative paths to achieve your styling objectives or to navigate the restrictions in place within the Brightspace HTML editor.