search

danomatic / react-pdf-html

Render HTML in react-pdf
MIT License
169 stars 40 forks source link

Customize indentation ordered list #51

Open robyhuzwandar opened 1 year ago

robyhuzwandar commented 1 year ago

I want to remove tab space in the order list: this is my expectation:

image

so I tried to custom the stylesheet:

        const stylesheet = {
        li_bullet: {
            width: 25,
            textAlign: "right",
            paddingRight: 10,
            margin: 0,
            letterSpacing: 1.15,
        },
    };

    return (
        <View style={styles.htmlContainer}>
           <Html stylesheet={stylesheet}>{getHtml()}</Html>
            </View>
    );
};

but show this - character :

image

how to achive my goal ?

luke-maddox commented 1 year ago

Having the same bug.

ankitgoel25 commented 4 months ago

I was facing the same issue. I used custom renderers to solve it.

renderers={{
        li: ({ element, style, children }) => {
          const list = element.closest('ol, ul') as HtmlElement;
          const isOrderedList = list?.tag === 'ol' || element.parentNode.tag === 'ol';

          return (
            <View wrap={false} style={{ display: 'flex', flexDirection: 'row' }}>
              <View>
                <Text>{isOrderedList ? `${element.indexOfType + 1}.` : '•'}</Text>
              </View>
              <View>
                <Text>{children}</Text>
              </View>
            </View>
          );
        },
      }}