This package is WIP.
A collection of filters to help you control your type and own your layout. These practical and lightweight filters will help you deliver your interface without compromising on typographic handling.
Make those typos vanish from your app!
npm install --save vuejs-typography-filtersimport Vue from 'vue';
import VuejsTypographyFilters from 'vuejs-typography-filters'
// Use all filters and directives.
Vue.use(VuejsTypographyFilters);or
import Vue from 'vue';
import { typoJsonRichText, typoWidow, typoStripTags } from 'vuejs-typography-filters';
// Import only what you need.
Vue.use(typoJsonRichText);
Vue.use(typoWidow);
Vue.use(typoStripTags);
import { typoJsonRichText } from 'vuejs-typography-filters';
This filter converts URI encoded JSON to HTML rich text.
Syntax
typoJsonRichText
<p>{{ '%3Cp%3EDesign%20to%20create%20a%20truly%20unique%20experience.%3C%2Fp%3E' | typoJsonRichText }}</p>
<!-- <p>Design to create a truly unique experience.</p> -->const msg1 = this.$typoJsonRichText('%3Cp%3EDesign%20to%20create%20a%20truly%20unique%20experience.%3C%2Fp%3E')
console.log(msg1) // <p>Design to create a truly unique experience.</p>
import { typoLowerCase } from 'vuejs-typography-filters';
This filter converts the input to lowercase and trims the text.
Syntax
typoLowerCase
<p>{{ 'LoWERcase StrInG' | typoLowerCase }}</p>
<!-- lowercase string -->const msg1 = this.$typoLowerCase('LoWERcase StrInG')
console.log(msg1) // lowercase string
import { typoSmartTypeSet } from 'vuejs-typography-filters';
This filter converts single and double quotes to curly opening and closing quotes, 3 periods to an elipsis and multiple dashes to an en dash.
Inspired by tools like SmartyPants.
Syntax
typoSmartTypeSet
<p>{{ '\'Some curly... "quotes" for this quote.\' -- Some Guy' | typoSmartTypeSet }}</p>
<!-- ‘Some curly… “quotes” for this quote.’ — Some Guy -->const msg1 = this.$typoLowerCase('\'Some curly... "quotes" for this quote.\' -- Some Guy')
console.log(msg1) // ‘Some curly… “quotes” for this quote.’ — Some Guy
import { typoStripTags } from 'vuejs-typography-filters';
This filter converts URI encoded JSON to HTML rich text.
Syntax
typoStripTags
<p>{{ '<span>This text should not have <strong>bolded characters from spans</strong>.</span>' | typoStripTags }}</p>
<!-- This text should not have bolded characters from spans. -->const msg1 = this.$typoStripTags('<span>This text should not have <strong>bolded characters from spans</strong>.</span>')
console.log(msg1) // <p>This text should not have bolded characters from spans.</p>
import { typoTitleCase } from 'vuejs-typography-filters';
This filter converts the first character of every word to uppercase and all remainder to lowercase.
Syntax
typoTitleCase
<p>{{ 'My amazing tItLe' | typoTitleCase }}</p>
<!-- My Amazing Title -->const msg1 = this.$typoTitleCase('My amazing tItLe')
console.log(msg1) // My Amazing Title
import { typoUpperCase } from 'vuejs-typography-filters';
This filter converts the input to lowercase and trims the text.
Syntax
typoUpperCase
<p>{{ 'I need attention!' | typoUpperCase }}</p>
<!-- I NEED ATTENTION! -->const msg1 = this.$typoUpperCase('I need attention!')
console.log(msg1) // I NEED ATTENTION!
import { typoWidow } from 'vuejs-typography-filters';
This filter adds a non-breaking space before the last word of a block of block of text only if the last word is larger than n.
Syntax
typoWidow(length)
<p>{{ 'This text has a typoWidow at the end' | typoWidow }}</p>
<!-- This text has a typoWidow at
the end -->
<p>{{ 'This text has a typoWidow at the end' | typoWidow(3) }}</p>
<!-- This text has a typoWidow at the
end -->const msg1 = this.$typoWidow('This text has a typoWidow at the end.')
const msg2 = this.$typoWidow('This text has a typoWidow at the end.', 3, 'end')
console.log(msg1) // This text has a typoWidow at the end.
console.log(msg2) // This text has a typoWidow at the end.API
| option | value | default | required | description |
|---|---|---|---|---|
length |
any number | -1 | NO | Indicates the length of the string to be chopped off. |