Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/avcs06/scaletext

Responsive Web Typography
https://github.com/avcs06/scaletext

Last synced: 1 day ago
JSON representation

Responsive Web Typography

Awesome Lists containing this project

README 

        
# scaleText

ScaleText preserves the aspect ratio of Typography still maintaining readability. One doesn’t need to write media queries for scaling text anymore. ScaleText removes code smells and handles font size dynamically in a webpage for any type of display, be it Smartphone or Tablet or Laptop.



# Documentation & Demo

Please click here for Documentation and Demo of scaleText.



# Installation



Include the js file in your page before ending body tag.



If you are using Bootstrap 2 or Bootstrap 3, you will have to include the css file in your page before ending head tag.



# Dependency



JQuery



# How to and why should I use scaleText?



### Easy to implement : 

All you have to do is include scaleText.js in your page. Design your page for a fixed screen size like you usually do, but you don’t have to write any media queries for font-size. Then initialize the plugin for all the elements you want to scale. But please do keep in mind that you have to pass the top level container and the width of it, for which you have designed your page.



Example:

Top level container for this page is 'body' and  I have designed this page for 1349px.

Now I want to scale all p elements in this page.

$('p').scaleText( { container : 'body' , initialWidth : 1349  } );




### Support for Bootstrap Columns : 

If you are using Bootstrap and you want to scale text which is inside a Bootstrap column, you have to add an extra class bootscale{version}-{column width} for those columns and include scaleText.css file in the page.



Example:

Bootstrap 3:  col-md-2 bootscale3-2


Bootstrap 2:  span2 bootscale2-2




### Generalized : 

It works for all types of elements, be it table, inline, block, floated or positioned.
Font-size calculation is based directly on the element width ( or width of closest block element in case the element takes only content width) instead of screen width.

### Scaling independent of screen size : 

You can scale anytime you want independent of window’s resize event using the api function $.scaleText() . You can pass an element as parameter to this function and it will scale only children of that element. If no parameter is passed it will scale all the elements in the page.

PS: Elements have to be initialized before, for this function to work.



Example:


$.scaleText(); / $.scaleText('body');





# API



   

     

       Option

       Default Value

       Description

     

    

    

     

        container required

        'body'

        Top level container for your page.Initializing elements outside this container will throw error.
Accepts jQuery selector string, javascript DOM object, jQuery DOM object

     

     

        initialWidth required

        1366 (in px)

        Width of the top level container when you designed the page (or) the width at which font-sizes you have defined should be applied.
 Accepts integer

     

     

        minFont

        10 (in px)

        Minimum value for font-size, if the calculated value is less than this value, this value will be set as font-size.
 Accepts integer

     

     

        maxFont

        999 (in px)

        Maximum value for font-size, if the calculated value is more than this value, this value will be set as font-size.
 Accepts integer

     

    



# Example

Include scaleText.js file in the page.



Initialize scaleText function on all the elements you want to scale


$('.mainContent,li,blockquote,h2,h3,.page-title,td,th').scaleText({

    container : 'body' ,

    initialWidth : 1349,

    minFont : 10

});



Call the $.scaleText() function to scale text independent of window's resize event.


$(selector).click(function() {

    $.scaleText();

});