SharePoint online custom list formatting - only Transform or writing-mode css ignored

Question

Trying to style the list in the matrix mode where the column headers needs to be hidden and want to display custom headers. On the headers I am applying the style with writing-mode: vertical-rl and transform:rotate(-180deg) along with couple of more styling options.

The column header is visible with rest of the styling when checked in debug mode except the above two. I need to change the writing-mode as have to show the text vertical aligned due to huge matrix.

I have been trying various things- In the following code, the column header "Long header for the column 2" is the column where I am trying to apply styling.

Sample Code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "align-items": "flex-start"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
            "class":"ms-bgColor-themePrimary ms-fontColor-white"
            
        },
        "style": {
                "display": "=if(@rowIndex == 0, 'flex', 'none')",
                "font-weight": "bold",
                "font-size": "11px",
                "width": "90%",
                "padding": "1px",
                "border-bottom-width": "1px",
                "border-bottom-style": "solid",
                "border-top-width": "1px",
                "border-top-style": "solid"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "\n\n\n\n\nSome generic header 1",
            "style": {
                "flex-grow":"1",
                "width":"300px",
                "border-right-width":"1px",
                "border-right-style":"solid",
                "border-left-width":"1px",
                "border-left-style":"solid",
                "text-align":"center",
                "vertical-align": "middle"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 2",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "vertical-rl",
                    "transform":"rotate(-180deg)",
                     "border-right-width":"1px",
                    "border-right-style":"solid"
            }            
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 3",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "vertical-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"

            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 4",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 5",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 6",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 7",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 8",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 9",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          }, 
          {
            "elmType": "div",
            "txtContent": "Long header for the column 10",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 11",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 12",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 13",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 14",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 15",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 16",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {
         
        },
        "style": {
          "display": "flex",
          "font-size": "11px",
          "width": "90%",
          "text-align":"center",
          "border-bottom-width": "1px",
          "border-bottom-style": "solid"
 
        
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "[$Title]",
            "style": {
              "flex-grow":"1",
                "font-weight": "bold",
                "width":"300px",                
                "text-align":"left",
                "border-right-width":"1px",
                "border-right-style":"solid",
                 "border-left-width":"1px",
                "border-left-style":"solid"

            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col2]",
            "style": {
                "width":"30px",
                "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col3]",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"             
              
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col4]",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"
             
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col5]",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"       
              
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col6]",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"         
              
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col7]",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"              
              
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col8]",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"          
              
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col8]",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"             
              
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col9]",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col10]",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col11]",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col12]",
            "style": {              
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"       
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col13]",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col14]",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$col15]",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"              
            }
          }

        ]
      }
    ]
  }
}

Any help would be much appreciated.

Answer 1

This seems like a limitation of JSON formatting in SharePoint. Currently, the following style attributes are allowed:

'background-color'
'fill'
'background-image'
'border'
'border-bottom'
'border-bottom-color'
'border-bottom-style'
'border-bottom-width'
'border-color'
'border-left'
'border-left-color'
'border-left-style'
'border-left-width'
'border-right'
'border-right-color'
'border-right-style'
'border-right-width'
'border-style'
'border-top'
'border-top-color'
'border-top-style'
'border-top-width'
'border-width'
'outline'
'outline-color'
'outline-style'
'outline-width'
'border-bottom-left-radius'
'border-bottom-right-radius'
'border-radius'
'border-top-left-radius'
'border-top-right-radius'
'box-decoration-break'
'box-shadow'
'box-sizing'

'overflow-x'
'overflow-y'
'overflow-style'
'rotation'
'rotation-point'

'opacity'
'cursor'

'height'
'max-height'
'max-width'
'min-height'
'min-width'
'width'

'flex-grow'
'flex-shrink'
'flex-flow'
'flex-direction'
'flex-wrap'
'flex'
'justify-content'
'align-items'

'box-align'
'box-direction'
'box-flex'
'box-flex-group'
'box-lines'
'box-ordinal-group'
'box-orient'
'box-pack'

'font'
'font-family'
'font-size'
'font-style'
'font-variant'
'font-weight'
'font-size-adjust'
'font-stretch'

'grid-columns'
'grid-rows'

'margin'
'margin-bottom'
'margin-left'
'margin-right'
'margin-top'

'column-count'
'column-fill'
'column-gap'
'column-rule'
'column-rule-color'
'column-rule-style'
'column-rule-width'
'column-span'
'column-width'
'columns'

'padding'
'padding-bottom'
'padding-left'
'padding-right'
'padding-top'

'bottom'
'clear'
'clip'
'display'
'float'
'left'
'overflow'
'position' 
'right'
'top'
'visibility'
'z-index'

'border-collapse'
'border-spacing'
'caption-side'
'empty-cells'
'table-layout'

'color'
'direction'
'letter-spacing'
'line-height'
'text-align'
'text-decoration'
'text-indent'
'text-transform'
'unicode-bidi'
'vertical-align'
'white-space'
'word-spacing'
'hanging-punctuation'
'punctuation-trim'
'text-align-last'
'text-justify'
'text-outline'
'text-overflow'
'text-shadow'
'text-wrap'
'word-break'
'word-wrap'

Source: Use column formatting to customize SharePoint - style

---

I will suggest you to create an issue (Question) at PnP List formatting repository. List formatting experts might able to answer your question more accurately.