Text in a range disappears in Firefox using flex and write mode
I have to show a short paragraph of Japanese characters centered both horizontally and vertically. I use this technique and it works fine in Google Chrome, but not Firefox.
// div {
// width: 300px;
// height: 300px;
// background: wheat;
// }
// span {
// writing-mode: tb-rl;
// display: flex;
// justify-content: center;
// align-items: center;
// width: 100%;
// height: 100%;
// }
div {
width: 300px;
height: 300px;
background: wheat;
display: flex;
justify-content: center;
align-items: center;
}
span {
writing-mode: tb-rl;
-moz-transform: translate(-50%,0);
left:initial;
}
<div>
<span>ใในใ<br>ใในใ<br>ใในใ</span>
</div>
+3
source to share
2 answers
Thanks @ fen1x a lot for your answer. But there are still many problems in your solution. (See Updated version above). Finally, it is best to use position: absolute
instead of for this situation display: flex
. It will reflect well on IE 11 and IE Edge as well.
div {
width: 200px;
height: 200px;
background: wheat;
position: relative;
}
span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: left;
white-space: nowrap;
writing-mode: tb-rl;
}
<div>
<span>ใในใใในใ<br>ใในใใในใใในใ<br>ใในใ</span>
</div>
+1
source to share
It seems to be a Firefox bug .
This can be avoided by using a different centering method for Firefox (although a bit of a hack):
div {
width: 300px;
height: 300px;
background: wheat;
display: flex;
justify-content: center;
align-items: center;
}
span {
writing-mode: tb-rl;
-moz-transform: translate(-50%,0);
left:initial;
}
<div>
<span>ใในใ</span>
</div>
0
source to share