Fancy Text Alignment Plugin - Invisible Line

Invisible line is a small jQuery plugin that provides an experimental way to align text within the document. 

The text is divided into two different columns to form an invisible vertical line. 

The possible alignments replicate the traditional ones: centered, justified, left and right.

You can move the position of the invisible line by simply clicking on the text, where you want to get the division. 

You can also apply 4 different styles to the text , download it in png format or share it on the web. 

How to use it:

1. Load tne necessary JavaScript and CSS files in the HTML.

<link rel="stylesheet" href="/path/to/invisible-line.css" />
<script src="/path/to/cdn/jquery.min.js"></script> 
<script src="/path/to/jquery.min.js"></script>

2. Attach the function to the text container and done.

<p class="example">
  ...
</p>

$(function(){
  $(".example").invisibleline();
});

3. Specify the additional width of the invisible line. Default: 0.

$(function(){
  $(".example").invisibleline({
    width: 1
  });
});

4. Specify the position of the invisible line. Default: 50(50%).

$(function(){
  $(".example").invisibleline({
    position: 60 // 60%
  });
});

5. Define the text alignment:

• 0: centered
• 1: justified (default)
• 2: left
• 3: right

$(function(){
  $(".example").invisibleline({
    alignment: 0
  });
});

6. Define the line break:

• 0: colum break
• 1: line break (default)
• 2: block break

$(function(){
  $(".example").invisibleline({
    linebreak: 0
  });
});

7. Enable/disable the invisible line.

$(function(){
  $(".example").invisibleline({
    active: 0 // disable
  });
});

8. Deteromine the HTML tag to hold the invisible line.

$(function(){
  $(".example").invisibleline({
    tag: 'div'
  });
});

About Author:

Author: Paolo Valagussa

Website: https://www.threebu.it/invisible-line

---

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