Hiding an element without using display:none or visibility:hidden

Question

I am trying to render a PDF with react-pdf. To be clear, I mean this react-pdf library, not the other one. I want to include certain text in the PDF that will be used for indexing in the future, but I want for that text to be invisible (or nearly invisible). I will later detect this text with a Python script that reads in the text from the PDF.

My question is how to achieve this by styling the hiddenheader.

<Text style={styles.hiddenheader}>###HIDDEN HEADER###</Text>

const styles = StyleSheet.create({
  hiddenheader: {
    visibility: 'hidden',
    color: 'red',
  }
});

... Does not work. The text is still colored red, so I know that the style is being applied, but the text is not hidden, it is clear as day.

const styles = StyleSheet.create({
  hiddenheader: {
    display: 'none',
    color: 'red',
  }
});

... Also does not work. The text is still colored red, so I know that the style is being applied, but all instances except for one are deleted, and that one bizarrely appears at the very top of the first page, clear as day.

I don't need a solution that completely removes the element from the rendered page (and that might prevent the element from ever appearing). I just need one that makes the text invisible to the naked eye.

Answer 1

Since we want the text to remain in the PDF for indexing, setting opacity: 0 will ensure the text remains in the PDF without actually removing it from the document.

  hiddenheader: {
    opacity: 0,
    fontSize: 0.1
  }