SVG text element, property writing-mode: tb, does not work in Firefox

Question

I'm doing an SVG, I need to show a measure and I want to put text vertically, using writing-mode: tb; everything perfect in chrome, IE, Opera and Safari but in firefox the text appears horizontal.

<svg version="1.1" viewBox="100,100" preserveAspectRatio="xMidYMin">
    <style type="text/css">
        .cota-text {
          fill: #000;
          font-size: 10px; 
          text-anchor: middle;
        }

        .cota-vertical { 
            writing-mode: tb; 
        }
     </style>
     <text x="10" y="10" class="cota-text cota-vertical">TEXT</text>
</svg>

I have no clue what could be causing the issue. Could someone please help me troubleshoot?

fiddle:

http://jsfiddle.net/yf4nduob/1/

Answer 1

Possible duplicate of vertical text in d3 (not rotated)

Citing from there:

The 'writing-mode' property is supposed to change the first aspect without affecting the others, but as you discovered it's not implemented at all in Firefox, while IE rotates the text but doesn't respect the horizontal-glyph rule.

Here are three possible ways to get vertical text in SVG though cross-browser from the same answer.

Among those:

//Blue text, uses d3 to create a series of tspans//
svg.append("text")
  .attr("x", 40)
  .attr("y", 40)
  .attr("font-size", 50)
  .attr("id", "title")
  .style("fill", "blue")
  .attr("transform", "translate(300,0)")
  .attr("text-anchor", "middle")
  .selectAll("tspan")
      .data("Top 100 Mentions".split(""))
  .enter().append("tspan")
      .attr("x", 0)
      .attr("dy", "0.8em")
      .text(function(d){return d;});