Google 个图表 HTML 个从右到左的问题

Question

我在 html 中为从右到左的网页使用带有 dir="rtl" 标签的 Google 图表时遇到了一个奇怪的错误。

发生的情况是页面变大 space 并且无缘无故向左滚动。发生在我的 Chrome 和 Safari 上。

<html lang="ar" dir="rtl">

这是在 jsfiddle 上重现错误的最简单方法 https://jsfiddle.net/t4ve0kkf/

google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawBasic);

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('timeofday', 'Time of Day');
  data.addColumn('number', 'Motivation Level');

  data.addRows([
    [{v: [8, 0, 0], f: '8 am'}, 1],
    [{v: [9, 0, 0], f: '9 am'}, 2],
    [{v: [10, 0, 0], f:'10 am'}, 3],
    [{v: [11, 0, 0], f: '11 am'}, 4],
    [{v: [12, 0, 0], f: '12 pm'}, 5],
    [{v: [13, 0, 0], f: '1 pm'}, 6],
    [{v: [14, 0, 0], f: '2 pm'}, 7],
    [{v: [15, 0, 0], f: '3 pm'}, 8],
    [{v: [16, 0, 0], f: '4 pm'}, 9],
    [{v: [17, 0, 0], f: '5 pm'}, 10],
  ]);

    var options = {
    title: 'Motivation Level Throughout the Day',
    hAxis: {
    title: 'Time of Day',
    format: 'h:mm a',
    viewWindow: {
    min: [7, 30, 0],
               max: [17, 30, 0]
               }
               },
               vAxis: {
               title: 'Rating (scale of 1-10)'
               }
               };

               var chart = new google.visualization.ColumnChart(
               document.getElementById('chart_div'));

  chart.draw(data, options);
}

<html lang="ar" dir="rtl">

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <div id="chart_div"></div>
</html>

我也尝试过将 lang 和 dir 添加到图表 div 中，同时将 rtl 标记保留在主 html 中，但没有成功

<div id="chart_div" lang="en" dir="ltr"> </div>

Answer 1

使用页面检查器检查呈现的 HTML 似乎 HTML 的这一部分导致了问题：

<div aria-label="Данные диаграммы в виде таблицы." style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">/* ... */</div>

所以基本上 "hiding" 带有 left: -10000px 的 ARIA 元素与 rtl 文档不兼容，因为很明显它会由于负左而增加这个巨大的差距。

修复它的一种方法是强制这个 aria-lable 使用 left: auto 渲染并将它移动到顶部：

html[dir="rtl"] svg + [aria-label] {
    top: -1000px !important;
    left: auto !important;
}

演示： https://jsfiddle.net/57oe0ktz/

Google 个图表 HTML 个从右到左的问题

Google charts HTML right to left issue

html

javascript

css

google-visualization

right-to-left