Vertical text in HTML with writing-mode:vertical-rl not working
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!
Answers
-
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>- 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-modecan be allowed or if there are any restrictions in place that could be adjusted.
- 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
- Using Alternative CSS:
- If
writing-modeis 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 withtransform: rotate(90deg);, although this is not a direct replacement forwriting-mode.
- If
- 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.
- 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.
- 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-modebeing stripped, they offer alternative paths to achieve your styling objectives or to navigate the restrictions in place within the Brightspace HTML editor. - Check HTML Editor Configuration:
-
@Jonatan B.B.789 Your screenshots did not get attached to this post, but I have been able to use vertical text in tables by combining the writing mode with text orientation:
writing-mode:vertical-lr; text-orientation:mixed
writing-mode:vertical-lr; text-orientation:upright
-
Thank you for the quick replies. I did not get it to work yet though.
With the additional text-orientation the writing-mode tag still gets stripped. transform: rotate also get stripped.
The last thing I'd like to try before contacting our administrator would be to use an external CSS file. However, I am not sure how to do this. The content editor source code editor does not seem to give me access to the <head> of the HTML, where a link to the CSS file would usually be placed.
If I add a <link rel…> tag at the top of the code it just gets stripped…
Any pointers to how to include external CSS?
Thanks!
-
@Jonatan B.B.789 Where are you adding this code? To an HTML page within Content or to a description area? Some CSS will not work in description areas since those are not real HTML pages.
-
@Jennifer.W.973 Thanks for your replies. I tried adding it to the style tag of various HTML elements (td and p etc.). It then displays correctly in the editor but gets stripped when the update is saved.
It is in the Description area for a Module under Content.
-
If I upload an HTML page, vertical text does display correctly. This is useless for what I want to do though as it adds an unnecessary extra click for the students to go through instead of displaying the content directly.
