Fix missing style transfer from existing textarea to hwt containers

[Dalimil]

This pull request fixes a couple of CSS bugs in the original plugin.

To exactly match our text overlay we must ensure that the two text containers have the same styling. For textareas that already have certain line-height and font CSS properties set, we must ensure that these are copied to our new containers, so that both text overlay perfectly.

This pull request also fixes previously transparent background - for dark (or any non-white) websites, this would modify the appearance of textareas and make them hard to read.

[lonekorean]

Thanks for this, I like the idea. Some concerns though. It doesn't play well with existing CSS. For example, on the demo page:

I'd like the solution to be backwards compatible. I don't know if that's feasible to do automatically, or if we put your code behind an option that people enable? Not sure.

Also not sure about which styles are copied from the textarea element and which are not. Just as an example, letter-spacing can cause a text styling mismatch, so we'd probably want to copy it. But there are so many other styles to consider, too. I don't know where the sanity line is.

I'll keep thinking on it, would be sweet to make this work.

[Dalimil]

Couple of changes here. I believe users should not try to style .hwt-content class - this is our internal class. Let them style their actual textarea or any classes that they apply to their textarea - we'll simply copy the computed styles from them (font, line-height, etc.).

Once you remove the custom .hwt-content styles from the demo page (style textarea directly instead - simply change the CSS rule selector to update), it should work as expected with the new version.

[lonekorean]

I see your reasoning about it being an internal class, but this would still be a breaking change for current implementations. I would only consider breaking backwards compatibility for a new major version release, but I don't think it's ready for that. Still unsure how to determine all the properties that get copied and all the properties that don't.

[Dalimil]

Hmmm, I suppose I also have a slightly different use case for the plugin. Currently, the styling of .hwt-content works fine if the highlight function of the plugin is applied right after the page loads. One should then call $('.string-example').highlightWithinTextarea({ highlight: '' }) to remove the highlight, because calling $('.string-example').highlightWithinTextarea('destroy') (with the class/id bug fixed) would completely change the styling. Demo page:

My use case is: I have a couple of textareas (potentially with various CSS styles) on a page and need to start highlighting their text at some point (call the highlight function). What my pull-request is trying to achieve is keeping the visual state the same before (without .hwt-* classes) and after the function is called (with .hwt-* classes).

[lonekorean]

Ah, I see. That makes sense.

[GrayedFox]

Hi @Dalimil - sorry for bringing up such an old thread - but were you at all successful in applying the highlight without changing the original textfields? I need to do exactly that for this plug-in I'm developing, and I think your approach of styling the textarea based on existing attributes is the way to go.

What did you mean however by "Once you remove the custom .hwt-content styles from the demo page (style textarea directly instead - simply change the CSS rule selector to update), it should work as expected with the new version."?

I ask because after implementing your changes I am seeing the same bug (highlight is no longer matched to text -- the textfield now retains it's original style/position/etc however highlighting is off).

Thanks for your time!

[Dalimil]

@GrayedFox I believe I got it to work for my purposes, but it's been such a long time ago I honestly don't remember the code details... : https://github.com/Dalimil/highlight-within-textarea

[GrayedFox]

@Dalimil hey thanks for the reply, I ended up getting it working too, it was a matter of getting the padding and border values right (or more specifically, inheriting those from the textarea). Cheers :)