Some characters are not compatible with the CSS writing-mode feature

There seems to be an issue with the CSS writing mode not applying correctly to the symbol '№'. Here is an example:

<html>  
  <head></head>
  <body>
    <p style="writing-mode: vertical-lr;">
      Номер № 2
    </p>
  <body>    
</html>

Despite rotating all symbols, only the symbol '№' remains unchanged. What could be causing this issue?

Answer №1

Swap Номер № 2 for Номер N° 2

It's a recognized issue related to certain symbols

Answer №2

It's not just limited to symbols; even the HAN characters (used in Chinese, Japanese, and Korean languages) do not rotate when using writing-mode: vertical-rl.

<html>  
  <head></head>
  <body>
    <p style="writing-mode: vertical-rl;">
       ニュース
    </p>
  <body>    
</html>

For more information, visit: https://www.w3.org/International/articles/vertical-text/index

Answer №3

is just one example of a symbol that remains constant; there are others as well. Certain symbols simply do not have support.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to generate a navigation panel using HTML/CSS and jQuery

I recently completed the basic courses in HTML/CSS, JavaScript, jQuery, and PHP on Codecademy. I'm currently working on creating a website using HTML/CSS and jQuery in Codecademy's codebits. However, I'm facing some issues with my navigation ...

Is there a sophisticated CSS compressor that can eliminate unnecessary code and separate identical rules with commas?

Consider this input{margin:0}body{margin:0;background:white} can also be written as input,body{margin:0}body{background:white} or like this input,body{margin:0}body{margin:0;padding:0} and simplified to input,body{margin:0}body{padding:0} Bottom Li ...

Spacing in CSS between the menu and its submenu elements

My current challenge involves creating space between the menu and the submenu. However, I've noticed that when there is this space, the submenu doesn't function correctly. It only works when the design has no gap between the menu and the submenu. ...

The text element does not line up with the icons

As I'm working on creating my first account page header, I've run into an issue with some of the icons not aligning perfectly with the text. While advanced developers may find this task simple, as a beginner, I could really use some advice on how ...

Customizing a unique dropdown navigation experience

I have very limited experience with using jQuery and CSS. I recently came across the DropIt jQuery plugin files (accessible at ) and decided to integrate it into my Ruby on Rails project. Unfortunately, I am struggling with implementing the "Hover Me" exa ...

Why did the CSS rendering suddenly come to a halt?

I am facing a confusion with EJS. When I make a post request, EJS renders my CSS properly. However, when I try the following code snippet: exports.resetpassword = async (req, res) => { const {id, token} = req.params; const user = await LoginMo ...

When viewing Google maps in full screen mode, the image suddenly vanishes

I have a map with a logo positioned in the lower right corner near the controls. However, when I switch to full screen mode, the logo disappears. I can see the div (aggdata-info) in Firebug, but the image/logo is not visible. Any suggestions on how to fix ...

Ensuring the validity of float and non-empty values in JavaScript

Embarking on the journey of web development, I'm delving into basic applications. My current project involves creating a straightforward webpage to add two numbers and implementing preliminary validations - ensuring that the input fields are not left ...

CSS - Implementing Multi-Line Text Wrapping

Can anyone provide some guidance on how to handle an issue where having too much text in the description of an image pushes the image up? Thank you. I have created a basic fiddle - resize the window to see them inline. JSFiddle div.gallery { border: ...

When displaying content within an iframe, toggle the visibility of div elements

I'm attempting to toggle the visibility of certain page elements based on whether the page is loaded in an iframe. <script>this.top.location !== this.location && (this.top.location = this.location);</script> The above code succes ...

Masonry style attempted for posts but did not produce desired outcome

I've been experimenting with different methods to achieve a masonry style layout for my posts. So far, using float:left seems to work almost perfectly, but occasionally there are gaps between the posts. I'm on the lookout for a solid solution to ...

What is the best way to design distinct buttons for various devices?

For my current responsive web design project, I have utilized Bootstrap extensively. Recently, I encountered a new issue that I'm uncertain of how to tackle. The problem arises with the following HTML code snippet: <!-- button color depending on d ...

Are inline styles being utilized in a Styled component?

I'm currently utilizing styled-components within a React project and I am having trouble finding documentation regarding whether or not a styled component can accept inline styles on the "style" property. For example: The Text component has been styl ...

CSS3 stackable-design

How can I avoid CSS3 elements from overlapping? They are all <span> precious </span> <span> and </span> <span> cute </span> And here is my current CSS code span { margin : 20px; min-width: 150px; border-r ...

Arrange pictures and div elements in a horizontal layout

I am facing an issue with my code that is displaying 5 'cards' in a messed up layout instead of a straight line. I have tried to align them vertically, but some are still higher and not in the right positions. For reference, I want the layout to ...

In certain browsers, the link changes color to white

As I assist my brother in setting up a website for his business, we encountered an issue. In some browsers, hyperlinks appear as white and therefore invisible. Interestingly, the hyperlink is white in Firefox, but not when browsing in incognito mode, see t ...

Guide to adding a Scrollable Navbar

Is the term "scroll bar" really accurate? I want to create a scrollable feature where users can easily select a city using their mouse wheel (or swipe on a smartphone) and then choose from possible cities within that country in a second window. Something s ...

changing web pages into PDF format

I need to convert HTML to PDF on a Linux system and integrate this functionality into a web application. Can you suggest any tools that are capable of doing this? Are there any other tools I should consider for this task? So far, I have attempted the foll ...

CSS: positioning and resizing image while maintaining aspect ratio

Is there a way to center and resize an image in html/css while maintaining its aspect ratio? I currently have a solution that centers the image, but it does not scale up when necessary. Here is the code snippet: http://jsfiddle.net/4Mvan/438/ .container ...

Exploring Material UI: Step-by-step guide to customizing component styles

After reviewing the documentation, I have discovered two ways to style the component: import * as React from 'react'; import { makeStyles } from '@mui/styles'; import Button from '@mui/material/Button'; const useStyles = make ...