How do you set the font size and line height for a CSS custom property

Ionic Framework Ionic Vue
1

I can’t figure out from the documentation or Googling how I set the font size and line height of the --placeholder-font-style custom property of the component.

Where do I set it? (it’s a specific component style, so I assumed I set a css class on the ion-textarea which contained the – assignment) And how do I express the values? No combination of font and size seems to work.

2

Which component is this for?

3

The textarea component.

4

You shouldn’t need a CSS variable from Ionic for this. You can target the ::placeholder pseudo element:

ion-textarea textarea::placeholder {
  line-height: 100px;
}
1 Like
5

Mind blown! Thank you

1 Like
6

Related to what I am trying to do: Do you know if there is a way to style text in ion-textarea as it is being typed, such as a spell checker or grammar checker would do?

7

You can use the spellcheck property for this: ion-textarea: Ionic Framework API Docs (I am assuming you are referring to the red lines under misspelled words)

8

To clarify I want to parse and add custom styling to words, like spell check but actually completely different custom functionality (named entity recognition).

9

ion-textarea is a wrapper around the native textarea element, so anything you can do with a native textarea you can do with ion-textarea.

It sounds like you want a rich text editor: https://richtexteditor.com/

1 Like
10

Yeah, one with a programmable API that works in Ionic 5/VueJS! :slight_smile: Thanks.

11

You could give vue-quill a try: GitHub - vueup/vue-quill: Rich Text Editor Component for Vue 3.

1 Like