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

Jonatan B.B.789
Jonatan B.B.789 Posts: 5 🌱
edited February 1 in Create - Set up your Brightspace course
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!
Tagged:
· Share on Twitter

Answers

  • brad.r.503
    brad.r.503 Posts: 35 ✨

    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.

    · Share on Twitter
  • Jennifer.W.973
    Jennifer.W.973 Posts: 369 🎆

    @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

    · Share on Twitter
  • Jonatan B.B.789
    Jonatan B.B.789 Posts: 5 🌱

    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.

    testcode.png

    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!

    · Share on Twitter
  • Jennifer.W.973
    Jennifer.W.973 Posts: 369 🎆

    @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.

    · Share on Twitter
  • Jonatan B.B.789
    Jonatan B.B.789 Posts: 5 🌱

    @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.

    · Share on Twitter
  • Jonatan B.B.789
    Jonatan B.B.789 Posts: 5 🌱

    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.

    · Share on Twitter

Categories