search

meliorence / react-native-render-html

iOS/Android pure javascript react-native component that renders your HTML into 100% native views
https://meliorence.github.io/react-native-render-html/
BSD 2-Clause "Simplified" License
3.48k stars 589 forks source link

Numbered list and text not aligning when rendering #592

Open rikinshah23 opened 2 years ago

rikinshah23 commented 2 years ago

Decision Table

Good Faith Declaration

Description

Numbered list is always showing like this for me. Is there a prop or an example I can use to add some padding to the text may be?

image

React Native Information

"react-native": "0.64.2",

RNRH Version

6.3.4

Tested Platforms

Reproduction Platforms

Minimal, Reproducible Example

export function htmlViewer(props) {
  return (
    <HTML
      enableExperimentalBRCollapsing={true}
      tagsStyles={{
        span: theme.textAlignLeft,
        p: theme.textAlignLeft,
      }}
      source={{ html: props.source }}
      onLinkPress={props?.linkpressed}
    />
  );
}

Additional Notes

No response

jsamr commented 2 years ago

@rikinshah23 please provide a reproducible example; this example relies on unknown props.

codesafdar commented 1 year ago

import React from 'react' import RenderHtml from 'react-native-render-html' import { myColors } from '../../theme/globals'

const tagsStyles = { body: { color: myColors.darkBlue700 }, p: { margin: '0px', padding: '0px', lineHeight: '20px', fontSize: '14px', fontWeight: '400' }, ul: { marginTop: '0px', marginBottom: '0px', paddingTop: '0px', paddingBottom: '0px', display: 'flex', flexDirection: 'column', alignItems: 'baseline' }, li: { display: 'inline-block', lineHeight: '20px', fontWeight: '400', paddingBottom: '0px', margin: '0px' } }

const classesStyles = { 'ql-indent-1': { marginLeft: '22px' }, 'ql-indent-2': { marginLeft: '44px' }, 'ql-indent-3': { marginLeft: '66px' }, 'ql-indent-4': { marginLeft: '88px' }, 'ql-indent-5': { marginLeft: '110px' }, 'ql-indent-6': { marginLeft: '132px' } } const ShowHtml = ({ data }) => { return ( <> <RenderHtml source={{ html: data }} tagsStyles={tagsStyles} enableExperimentalBRCollapsing classesStyles={classesStyles} /> </> ) }

export default ShowHtml

Screenshot 2023-02-27 at 6 48 40 PM

List bullets are not moving with text, please help me @jsamr

twocs commented 1 year ago

Here's a minimal example. The baseline of the container does not line up with the baseline of the numbering. https://snack.expo.dev/@tom.a/numbered-list-and-text-not-aligning-when-rendering

Seems that no style changes in tagsStyles can really affect the numbering, which is not intuitive or well documented (opinion).

I was able to fix the li numbering to get the lineHeight css property only by using "renderersProps". So in the example, you would need to do all the changes to the :

const renderersProps = {
    ul: {
      markerTextStyle: {
        lineHeight: '21px',
      },
    },
  };

<RenderHtml
  source={{html: data}}
  tagsStyles={tagsStyles}
  enableExperimentalBRCollapsing
  classesStyles={classesStyles}
  renderersProps={renderersProps}
/>
twocs commented 1 year ago

This is my complete minimal sample, currently available at https://snack.expo.dev/@tom.a/numbered-list-and-text-not-aligning-when-rendering

import React from 'react';
import RenderHtml from 'react-native-render-html';

export default function App() {
  const tagsStyles = {
    p: {
      margin: '0px',
      lineHeight: '26px',
    },
    ol: {
//      lineHeight: '26px',
    },
    li: {
//      lineHeight: '26px',
    }
  };

  const renderersProps = {
    ol: {
      markerTextStyle: {
        lineHeight: '26px',
      },
    },
  };

  const source = {
    html: `<ol>
    <li>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </li>
    <li>
      <p>Aliquam tincidunt mauris eu risus.</p>
    </li>
    <li>
      <p>Vestibulum auctor dapibus neque.</p>
    </li>
    <li>
      <p>Nunc dignissim risus id metus.</p>
    </li>
  </ol>`,
  };

  return (
    <>
      <RenderHtml
        source={source}
        tagsStyles={tagsStyles}
      />

      <RenderHtml
        source={source}
        tagsStyles={tagsStyles}
        renderersProps={renderersProps}
      />
    </>
  );
}

I left the commented out ol/li styling because they don't do anything to the numbers even though intuitively that's what I would try to do to change their formatting. Unfortunately some editors (e.g. Tiptap) just add <p> tags even inside <li> tags, and that's causing the issue because the numbering doesn't align with the baseline of the text but with the top of the margin.

ntienanh commented 1 year ago

you can try p: { marginVertical: 0 } at tagsStyles.

codesafdar commented 1 year ago

My issue is that when I give margin left to the li tag in list item then number in case of ol list does not move with text.

On Mon, May 15, 2023 at 2:32 PM Nguyễn Tiến Ánh @.***> wrote:

you can try p: { marginVertical: 0 } at tagsStyles.

— Reply to this email directly, view it on GitHub https://github.com/meliorence/react-native-render-html/issues/592#issuecomment-1547510349, or unsubscribe https://github.com/notifications/unsubscribe-auth/AV2MNH5KIZNQMHT5BV7ZW3DXGHZ3HANCNFSM6AAAAAARUQ3FD4 . You are receiving this because you commented.Message ID: @.***>

oliuradu commented 1 year ago

import React from 'react' import RenderHtml from 'react-native-render-html' import { myColors } from '../../theme/globals'

const tagsStyles = { body: { color: myColors.darkBlue700 }, p: { margin: '0px', padding: '0px', lineHeight: '20px', fontSize: '14px', fontWeight: '400' }, ul: { marginTop: '0px', marginBottom: '0px', paddingTop: '0px', paddingBottom: '0px', display: 'flex', flexDirection: 'column', alignItems: 'baseline' }, li: { display: 'inline-block', lineHeight: '20px', fontWeight: '400', paddingBottom: '0px', margin: '0px' } }

const classesStyles = { 'ql-indent-1': { marginLeft: '22px' }, 'ql-indent-2': { marginLeft: '44px' }, 'ql-indent-3': { marginLeft: '66px' }, 'ql-indent-4': { marginLeft: '88px' }, 'ql-indent-5': { marginLeft: '110px' }, 'ql-indent-6': { marginLeft: '132px' } } const ShowHtml = ({ data }) => { return ( <> <RenderHtml source={{ html: data }} tagsStyles={tagsStyles} enableExperimentalBRCollapsing classesStyles={classesStyles} /> </> ) }

export default ShowHtml Screenshot 2023-02-27 at 6 48 40 PM

List bullets are not moving with text, please help me @jsamr

i have the same problem, do you know any solution? thanks

olegmilan commented 3 months ago

Here's a minimal example. The baseline of the container does not line up with the baseline of the numbering. https://snack.expo.dev/@tom.a/numbered-list-and-text-not-aligning-when-rendering

Seems that no style changes in tagsStyles can really affect the numbering, which is not intuitive or well documented (opinion).

I was able to fix the li numbering to get the lineHeight css property only by using "renderersProps". So in the example, you would need to do all the changes to the :

const renderersProps = {
    ul: {
      markerTextStyle: {
        lineHeight: '21px',
      },
    },
  };

<RenderHtml
  source={{html: data}}
  tagsStyles={tagsStyles}
  enableExperimentalBRCollapsing
  classesStyles={classesStyles}
  renderersProps={renderersProps}
/>

Your solution works perfectly fine, thank you