The font size not show in html when I convert to html

[Terriermon]

Is there an existing issue for this?

• [X] I have searched the existing issues

The question

I want to convert document to html, but the html not show fontSize attributes when I changed the fontSize. And I convert to json it will show fontSize

html: <p>Wrtyuuuuu<strong>rcvjiikn</strong>uoonbbbnn</p> json: [{insert: Wrtyuuuuu}, {insert: rcvjiikn, attributes: {size: 22.0, bold: true}}, {insert: uoonbbbnn, attributes: {size: 28.0}}]

[hodfords-khai-mobile]

same issue

[CatHood0]

The issue comes from Vsc_quill_delta_to_html. You need to pass a custom ConverterOptions with you own inlineStyles implementation. This works for me.

This is the default inlineStyles implementation by Vsc_quill_delta_to_htmt:

inlineStyles: InlineStyles({
  'font': InlineStyleType(
      fn: (value, _) => defaultInlineFonts[value] ?? 'font-family:$value'),
  'size': InlineStyleType(map: {
    'small': 'font-size: 0.75em',
    'large': 'font-size: 1.5em',
    'huge': 'font-size: 2.5em',
  }),
  'indent': InlineStyleType(fn: (value, op) {
    final indentSize = (double.tryParse(value) ?? double.nan) * 3;
    final side = op.attributes['direction'] == 'rtl' ? 'right' : 'left';
    return 'padding-$side:${indentSize}em';
  }),
  'direction': InlineStyleType(fn: (value, op) {
    if (value == 'rtl') {
      final textAlign =
      isTruthy(op.attributes['align']) ? '' : '; text-align:inherit';
      return ('direction:rtl$textAlign');
    } else {
      return null;
    }
  }),
  'list': InlineStyleType(map: {
    'checked': "list-style-type:'\\2611';padding-left: 0.5em;",
    'unchecked': "list-style-type:'\\2610';padding-left: 0.5em;",
  }),
});

As you see, size just detect small, large and huge size by default.

[CatHood0]

This issue is already solved by the Vsc_quill_delta_to_html author. Here is his answer:

By default, QuillDeltaToHtmlConverter uses defaultInlineStyles (in op_to_html_converter.dart) to convert the Quill size attribute - this handles the semantic sizes: small large and huge. defaultInlineStyles has a map that defines how to convert one of these sizes to a CSS style.

If you want to use a size value that is different from small large or huge, you have to define your converter to handle it, like below.

      ConverterOptions(
          converterOptions: OpConverterOptions(
            inlineStylesFlag: true,
            inlineStyles: InlineStyles({
              ...defaultInlineStyles.attrs,
              'size': InlineStyleType(
                fn: (value, _) => 'font-size: ${value}px',
              ),
            }),
      );

InlineStyles takes either a map to define an explicit mapping of a value to a CSS style, or a fn - like in the example above - which converts an arbitrary value to a CSS style.