javascript - 在没有文本对齐对齐属性的情况下对齐多语言文本

Question

所以我有一个多语言网站(目前只有法语和英语)，有些地方有多行内容(标题)，有点像这个:

.banner-heading{
    font-size: 37.2px;
}

.banner-second-heading{
    font-size: 46px;
}

.banner-third-heading{
    font-size: 78px;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="flex flexCenter flexColumn col-xs-12 col-md-6 title-fr">     
    <h1 class="banner-heading">Une solution digitale</h1>   
    <h1 class="banner-second-heading">pour le bien-être</h1>
    <h1 class="banner-third-heading">au travail</h1>
</div>

并且设计师希望在没有 justify 属性的情况下完成它，因为它会使他们选择的字体变形。

我的问题是我目前对英语也做同样的事情(使用不同的值来保持文本在行首和行尾对齐)，但是保持当前状态已经很烦人了，我们应该决定要添加其他语言，几乎不可能有一种 css PER 语言，尤其是每行和每种语言都有不同的font-size。

所以我的问题是:如果不使用 justify 属性，我如何在不同的语言中获得相同的结果，因为它会使所选字体变形，并且不必使用 font-size不同语言的属性。

非常感谢您的帮助，如果这个问题已经得到解答，我很抱歉，我搜索了一下，没有找到任何答案。

Answer 1

我想我理解你的问题，你需要更改字体/文本的大小以适合容器。

这是一个使用 svg 和一些 JavaScript 来实现的解决方案。

首先我们必须使用svg写出文字

<svg  width="100%" height="auto" viewBox="0 0 100 20" preserveAspectRatio="xMidYMin slice">
  <text class="scalableText" x="0" y="15">Une solution digitale</text>  
</svg>

然后我们必须测量文本并更改视口(viewport)以适合文本。

var textElements = document.getElementsByClassName('scalableText');
for(var i = 0;i < textElements.length; i++)
{
    var textLength = textElements[i].getComputedTextLength();
    textElements[i].parentElement.setAttribute("viewBox", "0 0 " + textLength + " 20"); 
}

var textElements = document.getElementsByClassName('scalableText');
for(var i = 0;i < textElements.length; i++) {
  var textLength = textElements[i].getComputedTextLength();
  textElements[i].parentElement.setAttribute("viewBox", "0 0 " + textLength + " 20"); 
}

<svg width="100%" height="auto" viewBox="0 0 100 20" preserveAspectRatio="xMidYMin slice">
  <text class="scalableText" x="0" y="15">Une solution digitale</text>  
</svg>
  
<svg width="100%" height="auto" viewBox="0 0 100 20" preserveAspectRatio="xMidYMin slice">
  <text class="scalableText" x="0" y="15">pour le bien-être</text>  
</svg>
  
<svg width="100%" height="auto" viewBox="0 0 100 20" preserveAspectRatio="xMidYMin slice">
  <text class="scalableText" x="0" y="15">au travail</text>  
</svg>

Example on jsbin