How to vertically rotate and center-align text inside a table cell (react-pdf/renderer)

[RauschkugelxD]

Hi everyone,

I recently ran into a tricky layout issue using react-pdf, and since I couldn’t find a clear solution online, I wanted to share what worked for me.

🧩 The Problem

I needed to render vertically rotated text inside a table cell with fixed dimensions – only as wide as the rotated text required – and have it centered, both vertically and horizontally. Despite the cell having enough height to fit the rotated text, it kept wrapping, as if it were still being measured horizontally.

My hypothesis: It seems the layout dimensions are calculated before applying transforms, so the rotate(-90deg) is only visually applied after wrapping logic. The result: even though the rotated text would fit, the text wraps prematurely due to the narrow width.

✅ The Solution

After some experimentation, I found a simple workaround:

• Give the text element a fixed width, enough to hold the text in horizontal form (this allows react-pdf to calculate the layout without wrapping).
• Use flexDirection: "column" on the cell and center the text along both axes.

const styles = StyleSheet.create({
  tableCell: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
    width: 15,
    height: 45,
  },  
  verticalText: {
    width: 45, // virtual width for the text length
    transform: "rotate(-90deg)",
  },
});

return (
  <View style={styles.tableCell}>
    <Text style={styles.verticalText}>Vertical Text
    </Text>
  </View>
);

Hopefully this helps others running into the same issue when rotating text in table layouts.
If you have a better explanation for why this happens – or a cleaner solution – I’d love to hear it! 😊