Filter function / specific letters

[strarsis]

@yuanqing, @uroybd, @mburakerman: How can charming be used to wrap only certain letters (e.g. 'A' (capital A))? Can a filter callback be used that returns true for all parts that should be wrapped?

[yuanqing]

@strarsis Thanks for this.

1. I think it might be considerably more straightforward and lightweight if you adapted the algorithm used for charming to fit your specific use case.

2. Alternatively, you could also use options.setClassName to have the letter be in the class name itself, so that you can target specific letters in your CSS (eg. .letter-A). Code below from the project’s README:

   charming(element, {
     setClassName: function (index, letter) {
       return `index-${index} letter-${letter}`
     }
   })
   

[strarsis]

@yuanqing: Yes, the letters can have individual character-specific classes for selecting. What I want to avoid are all the unnecessary extra wrappers. Two examples: For a specific font, only the capital letter A should be restyled, e.g. using a SVG. Or as another example, a very specific Unicode emoji character should be replaced by a custom SVG (e.g. a WordPress theme). In both cases charming with wrappers with character-specific classes come in handy - but it will also wrap all the other letters although those will never be used by the site/theme.

[yuanqing]

@strarsis Thanks for providing the context!

Two examples: For a specific font, only the capital letter A should be restyled, e.g. using a SVG. Or as another example, a very specific Unicode emoji character should be replaced by a custom SVG (e.g. a WordPress theme). In both cases charming with wrappers with character-specific classes come in handy - but it will also wrap all the other letters although those will never be used by the site/theme.

The two examples you cited here are use cases that go beyond the scope of the charming library or the intent of Lettering.js. I would recommend that you create your own library or write your own helper function to accomplish the result that you’re looking for