Могу ли я настроить табуляции в html5?

Я хотел бы настроить табуляторы в html5 и иметь возможность выровнять текст с ними, как в Word. Для моего приложения я не могу использовать таблицы. Есть ли способ сделать это? Должен ли я использовать Javascript?

Ответ 1

Решение похоже на использование Javascript. Вот простой пример: http://jsfiddle.net/A6z5D/1:

<p>Hello bla bla bla<span id="tab1"></span>world</p>
<script>
function do_tab(id, tabstops)
{
    var tab1 = document.getElementById(id);
    var rect = tab1.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);
    var tabstop = 0;
    for (var i = 0; i < tabstops.length - 1; ++i)
    {
        if (rect.left >= tabstops[i] && rect.left < tabstops[i+1]) 
        {
            tabstop = tabstops[i+1];
        }
    }
    if (tabstop > 0)
    {
        var width = tabstop - rect.left;
        tab1.style.display = "inline-block";
        tab1.style.width = width + "px";
    }
}
do_tab("tab1", new Array(0, 100, 200, 300, 400));
</script>

Ответ 2

Несмотря на утверждения других плакатов об обратном, есть веские причины, чтобы хотеть делать то, что задал ОП, и многие способы сделать это, используя современный CSS (и многое другое в проекте спецификации, когда я пишу это). Вот только один путь.

<!DOCTYPE HTML>
<html>
 <head>
  <title>Tabs with css</title>
  <style>
  {body: font-family: arial;}
  div.row span{position: absolute;}
  div.row span:nth-child(1){left: 0px;}
  div.row span:nth-child(2){left: 250px;}
  div.row span:nth-child(3){left: 500px;}
  </style>
 </head>
 <body>
  <div class="row"><span>first row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>second row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>third row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>fourth row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>fifth row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
 </body>
</html>

См. примеры результатов здесь: http://jsfiddle.net/Td285/

Другой пример: с переполнением с переполнением: http://jsfiddle.net/KzhP8/

Ответ 3

Вы можете использовать свойство CSS p { text-indent:50px; }

Вы можете использовать классы css для каждого отступа, например

h1 { text-indent: 10px; }
h2 { text-indent: 14px; }
h3 { text-indent: 18px; }
p { text-indent: 20px; }
p.notice { text-indent: 24px; }

и сделайте HTML как этот

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Text 1</p>
<p class="notice">Text 2</p>

Поскольку вы можете только отступать одной строкой с этим свойством, существует другой способ поддержки многострочного отступа:

h1 { padding-left: 10px; }
h2 { padding-left: 14px; }
h3 { padding-left: 18px; }
p { padding-left: 20px; }
p.notice { padding-left: 24px; }

И, наконец, fiddle.

Ответ 4

Вы можете разделить свои данные на <div> с помощью классов, которые придают им все одинаковую фиксированную ширину. Таким образом, столбцы будут выстраиваться в линию.

<style>
  div.col-1 {
    width: 200px
  }
  div.col-2 {
    width: 500px
  }
</style>

First row is:
<div class="col-1">Some text here </div><div class="col-2">And here </div>
...
Second row is:
<div class="col-1">And here </div><div class="col-2">And here </div>

Ответ 5

Собственно, у меня была аналогичная ситуация, и я сделал это довольно просто. Используйте <span> в свойстве <p> и плавайте его соответствующим образом.

CSS

p.main-text { /* these properties don't matter much */    
    margin: 0;    
    text-indent: 0;    
    font-size: 1em;    
    line-height: 1.2;    
    text-align:justify;    
}    
span.column-width { /*this defines the width of the first column */    
    width: 33%;    
    float: left;    
}

HTML:

<p class="main-text"><span class="column-width">Diary Date: 2016 April 01 &mdash;</span>This is the text of the diary entry. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla pharetra metus id blandit. Integer molestie sed mauris eget gravida. Fusce aliquam diam eu arcu imperdiet vehicula. Fusce fermentum molestie aliquet. Phasellus sodales, mauris sed ornare accumsan, dolor ligula vehicula magna, vel pulvinar sapien lorem condimentum purus. Etiam vulputate commodo mattis. Etiam non tincidunt leo, eget ultricies mauris. Fusce rhoncus ultrices purus. Nunc id scelerisque nisi, quis congue turpis.</p>

скрипт: http://jsfiddle.net/Q3ruh/44/

Ответ 6

Я знаю, что в вопросе нет таблиц, и предыдущий ответ JS был непопулярным, но кто-то должен найти это полезным. Он не выполняет настоящих табуляторов, но это невозможно даже с CSS.

Если вы не хотите делать кучу ручных тегов span или table, этот JS автоматически превращает все элементы "tabs" класса в таблицу при загрузке страницы, используя символы табуляции в качестве руководства.

JS Fiddle: https://jsfiddle.net/s7m6zggp/7/

Изменить: во-вторых, возможно, это не самый лучший подход. Регулярное выражение бросает мой мозг в петлю. Но я буду держать Fiddle на случай, если кто-то захочет его использовать.