转换中的 HTML 文本对齐问题答案

【问题标题】：HTML text-alignment issues on transforms转换中的 HTML 文本对齐问题
【发布时间】：2018-04-16 18:51:27
【问题描述】：

我正在尝试在 html/css 中呈现一行转换后的文本，但是我遇到了一些问题。当我缩放 Y 方向时，元素的整体对齐方式会像这张图片一样发生变化。

尝试将 L 旋转 180 度会导致相同的错误。如何保持文本在 y 缩放轴上的垂直对齐？假设我也使用小型大写字母进行此操作，您的解决方案有什么变化吗？

这里出了什么问题？

<style type="text/css" media="screen">
    #reflect{
    	display: flex;
    	flex-basis: auto;
    }
    #reflectl {
    	/*transform: scaleX(-1) !important;*/
    	transform: scale3d(-1,-1, 1);  !important;
    }
    #reflecte {
      	transform: scaleX(-1) !important;
    }
    #reflectc {
      	transform: scaleX(-1) !important;
    }
</style>

<text id=reflect>
  <text id="reflectref">REF</text>
  <text id="reflectl">L</text>
  <text id="reflecte">E</text>
  <text id="reflectc">C</text>
  <text id="reflectt" >T</text>
</text>

【问题讨论】：

标签： html css css-transforms text-alignment

【解决方案1】：

问题似乎是元素比它包含的文本高，所以当你旋转时，旋转中心并不完全在中间，所以当它完成时，文本会稍微偏离。最简单的解决方案是将元素的高度设置为所需的高度。

<style type="text/css" media="screen">
    #reflect{
    	display: flex;
    	flex-basis: auto;
    }
    #reflect text {
        height: 17px;
    }
    #reflectl {
    	/*transform: scaleX(-1) !important;*/
    	transform: scale3d(-1,-1, 1);  !important;
    }
    #reflecte {
      	transform: scaleX(-1) !important;
    }
    #reflectc {
      	transform: scaleX(-1) !important;
    }
</style>

<text id=reflect>
  <text id="reflectref">REF</text>
  <text id="reflectl">L</text>
  <text id="reflecte">E</text>
  <text id="reflectc">C</text>
  <text id="reflectt" >T</text>
</text>

<style type="text/css" media="screen">
    #reflect{
    	display: flex;
    	flex-basis: auto;
    }
    #reflect text {
        height: 17px;
    }
    #reflectl {
    	/*transform: scaleX(-1) !important;*/
    	transform: scale3d(-1,-1, 1);  !important;
    }
    #reflecte {
      	transform: scaleX(-1) !important;
    }
    #reflectc {
      	transform: scaleX(-1) !important;
    }
</style>

<text id=reflect>
  <text id="reflectref">ref</text>
  <text id="reflectl">l</text>
  <text id="reflecte">e</text>
  <text id="reflectc">c</text>
  <text id="reflectt" >t</text>
</text>

【讨论】：

我在最初写这个问题的浏览器上试过这个，它似乎可以正常工作。但是，在我的虚拟机（firefox 44）上运行旧版本的 firefox，现在渲染的 L 太高了，所以它似乎没有解决核心问题。这也导致结果在小写大写文本上更加严重地失败。
跟进更多。显然这是受字体大小的影响。我以 12 次为间隔进行了正确的旋转。