HTML 不同的焦点方向仅指向页面的一部分

Question

我试图只给 html 的一部分不同的焦点方向 - 我在 RTL 中的整个页面 - 希伯来语 我建立了一个时间线，当我使用 Tab 键时必须从 LTR 开始 但它改为 RTL。 因为我是为残疾人制作这个网站，所以使用键盘 TAB 的选项必须符合他们的逻辑方向。

对我来说，它的开始 RTL 是这样的:

我尝试了 tabindex 但这意味着我需要将它提供给页面的每个部分 (所有元素超过 100 个 tabindex)。 我在表中尝试了 dir = ltr - 没有。 我需要它才能从 1907 年开始 LTR。 有什么想法吗？

#historyLine td {
  display: inline-block;
  font-size: 25px;
  float: right;
  margin: -17px;
  margin-left: 10px;
}

<table dir="ltr">
  <tr id="historyLine">
    <td id="year2018"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="bottom" role="button" data-toggle="popover" data-trigger="focus" title="שנת 2018" data-content="מאז 'פוקימון' ועד היום האנימה ממשיכה לצבור פופולאריות בכל העולם וגם בישראל. עד היום יצאו מעל ל35,000  סדרות אנימה! ">2018</a>
      <td id="year1999"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="top" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1999" data-content="‘פוקימון'! הדבר הראשון שצץ לראש זה היצורים החמודים האלה! הסדרה הזו צברה פופולאריות והפכה למשחק קלפים משחק מחשב ועוד. היא פרצה את הדרך לאנימות בחו‘’ל ובעיקר באמריקה. ">1999</a></td>
      <td id="year1974"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="bottom" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1974" data-content="‘ספינת החלל יאמוטו' - זוהי סדרת אנימה האופרה הראשונה מסוגה. הסדרה נוצרה בהשראת הצלחת סדרת סרטי מלחמת הכוכבים.">1974</a></td>
      <td id="year1961"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="top" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1961" data-content=" 'היסטוריה מיידית' – זהו שמה של האנימה הראשונה ששודרה ביפן. כמו השם שלה, הסדרה לימדה ילדים על היסטוריה. ">1961</a></td>
      <td id="year1946"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="bottom" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1946" data-content="אוסמו טזוקה בן ה17 יצר את האנימה היפנית הראשונה אי פעם. לאנימה קוראים 'יומנו של מא-צ'אן'.">1946</a></td>
      <td id="year1907"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="top" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1907" data-content="האנימציה הראשונה בעולם נוצרה! היא ארכה רק 3 שניות בהן מלח מוריד את הכובע שלו.">1907</a></td>
  </tr>
</table>

Answer 1

看起来您搞砸了 LTR、RTL、float:right 和默认文档流... 请尝试下面的代码片段，我相信它可以满足您的需求。

body {
  direction: rtl
}

table {
  direction: ltr
}

#historyLine td {
  direction: rtl;
  font-size: 25px;
  padding: 0 15px;
}

[data-toggle=popover] {
  position: relative
}

[data-toggle=popover]:focus::after {
  content: attr(data-content);
  position: absolute;
  top: 25px;
  left: 25px;
  width: 100px;
  font-size: 10px;
  background: pink;
}

<table>
  <tr id="historyLine">
    <td id="year1907"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="top" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1907" data-content="האנימציה הראשונה בעולם נוצרה! היא ארכה רק 3 שניות בהן מלח מוריד את הכובע שלו.">1907</a></td>
    <td id="year1946"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="bottom" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1946" data-content="אוסמו טזוקה בן ה17 יצר את האנימה היפנית הראשונה אי פעם. לאנימה קוראים 'יומנו של מא-צ'אן'.">1946</a></td>
    <td id="year1961"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="top" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1961" data-content=" 'היסטוריה מיידית' – זהו שמה של האנימה הראשונה ששודרה ביפן. כמו השם שלה, הסדרה לימדה ילדים על היסטוריה. ">1961</a></td>
    <td id="year1974"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="bottom" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1974" data-content="‘ספינת החלל יאמוטו' - זוהי סדרת אנימה האופרה הראשונה מסוגה. הסדרה נוצרה בהשראת הצלחת סדרת סרטי מלחמת הכוכבים.">1974</a></td>
    <td id="year1999"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="top" role="button" data-toggle="popover" data-trigger="focus" title="שנת 1999" data-content="‘פוקימון'! הדבר הראשון שצץ לראש זה היצורים החמודים האלה! הסדרה הזו צברה פופולאריות והפכה למשחק קלפים משחק מחשב ועוד. היא פרצה את הדרך לאנימות בחו‘’ל ובעיקר באמריקה. ">1999</a></td>
    <td id="year2018"><a tabindex="0" class="btn btn-lg btn-danger" data-placement="bottom" role="button" data-toggle="popover" data-trigger="focus" title="שנת 2018" data-content="מאז 'פוקימון' ועד היום האנימה ממשיכה לצבור פופולאריות בכל העולם וגם בישראל. עד היום יצאו מעל ל35,000  סדרות אנימה! ">2018</a></td>
  </tr>
</table>