Align Text With Office Style Tab Stops - jQuery Tab Stops

A tiny jQuery plugin that formats text surrounding tabs and aligns them with Office-style custom tab stops defined in the JavaScript or via CSS styles.

How to use it:

1. To get started, include the jquery.tabstops.min.js after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.tabstops.min.js"></script>

2. Initialize the plugin on the text that contains tabs.

<p>Introduction 	3</p>

$('p').tabstops();

3. Customize the tab stops in the CSS.

p {
  --tabstops: 14cm dotted right;
}

// with different alignments
p {
  --tabstops: 2cm left, 4.5cm center, 7cm right, 9.5cm decimal, 10cm bar
}

4. Or via JavaScript.

$('p').tabstops({
  tabstops: [
    { 
      position: '14cm', 
      leader: 'dotted', 
      align: 'right' 
    },
    { 
      // ...
    },
  ]
});

// or
$('p').tabstops({
  tabstops: [ 
    '1cm left', 
    '5cm right dotted', 
    '10cm center'
  ]
});

5. Or via HTML data attribute.

<p data-tabstops="14cm dotted right">Introduction 	3</p>

6. Set the leader mode. Can be either 'text' (default) or 'border'.

<p data-leader-mode="border">Introduction 	3</p>

// or
$('p').tabstops({
  'leaderMode' : 'border'
});

7. Set the default tab stops. Default: 1 inch ( = 2.54 cm, = 96 px ).

<p data-default-tabstop="96px">Introduction 	3</p>

// or
$('p').tabstops({
  'defaultTabstop': '96px'
});

8. Determine whether to convert tab characters ( \t ) to HTML elements. Default: true.

<p data-convert-tabs="false">Introduction 	3</p>

// or
$('p').tabstops({
  'convertTabs: false
});

9. More configurations.

$('p').tabstops({

  // data-tab-element
  'tabElement' : 'span',

  // data-tab-class 
  'tabClass' : 'tab',

  // CSS property used to hold tab stops
  'tabstopsCssProperty' : '--tabstops', 
  
  // might be useful for tabs in SVG foreignObjects
  'scale' : 1, 

  // refresh on window resize
  'refreshOnResize' : true,
  
});

10. API methods.

// refresh
$('p').tabstops('refresh');

// set options and refresh
$('p').tabstops('refresh',{
  // options here
});

// update an option
$('p').tabstops('option','defaultTabstop', '2cm');

// update options
$('p').tabstops('option', { 
  // options here
});

// update attribute
$('p').attr('data-default-tabstop', '2cm');

// update CSS class
$('p').attr('class', 'myTabstopStyle');

// destroy
$('p').tabstops('destroy');

---

This awesome jQuery plugin is developed by randomnoun. For more Advanced Usages, please check the demo page or visit the official website.