https://github.com/tdumitrescu/angular-blocky-text

AngularJS component which splits text into single-char spans for special display
https://github.com/tdumitrescu/angular-blocky-text

Last synced: about 1 month ago
JSON representation

AngularJS component which splits text into single-char spans for special display

• Host: GitHub
• URL: https://github.com/tdumitrescu/angular-blocky-text
• Owner: tdumitrescu
• License: mit
• Created: 2013-12-17T04:00:03.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2013-12-17T18:27:10.000Z (about 11 years ago)
• Last Synced: 2024-10-17T21:43:14.989Z (2 months ago)
• Language: JavaScript
• Size: 137 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/tdumitrescu/angular-blocky-text.png?branch=master)](https://travis-ci.org/tdumitrescu/angular-blocky-text)

# angular-blocky-text

An AngularJS Bower component which transforms simple text into a character-by-character list of stylable HTML spans.

Sometimes a custom font just isn't enough, and you need more intricate CSS control over the appearance and behavior of each character. This works especially well for scoreboard-style numeric values, like this:

![blocky-text sample](sample-img.png "blocky-text sample")

## Usage

- Install into your app with Bower:

```sh

$ bower install --save angular-blocky-text

```

- Require the component code in `bower_components/angular-blocky-text/blocky-text.js`

- Declare module dependency `tdumitrescu.blocky-text` in your Angular app:

```javascript

angular.module('myApp', ['tdumitrescu.blocky-text']);

```

- Use directive `td-blocky-text` in your markup:

```html

```

The `divider` attribute is optional and specifies a character which can have special styles applied, e.g., the `:` in `05:13`, or `/` in `12/21/2013`.

This will expand as follows when `$scope.highScore()` returns 13.2:

```html



  1

  3

  .

  2



```

- Style the CSS class `td-blocky-text-char` and `td-blocky-text-char divider` as desired to apply a style to each character:

```css

.td-blocky-text-char {

  display:       inline-block;

  width:         1em;

  height:        1.5em;

  margin-left:   1px;

  margin-right:  1px;

  padding:       2px;

  text-align:    center;

  color:            white;

  background-color: red;

  border:           1px solid red;

 }

.td-blocky-text-char.divider {

  width:  0.5em;

  border: 0px;

  color:            white;

  background-color: transparent;

}

```

## Running tests

```sh

$ npm test

```