Permalink
Browse files

<Text> Expose Android's includeFontPadding property to JavaScript.

Summary:
By default Android will put extra space above text to allow for upper-case accents or other ascenders. With some fonts, this can make text look slightly misaligned when centered vertically.

We have found that the effect is very noticeable with certain custom fonts on Android. On iOS the font aligns vertically as expected.

Android exposes a property `includeFontPadding` that will remove this extra padding if set to false. This PR exposes that to JS, and adds it to the documentation and UIExplorer.
Closes #9323

Differential Revision: D4266713

Pulled By: lacker

fbshipit-source-id: f9711254bc26c09b4586a865f0e95ef4bf77cf3f
  • Loading branch information...
1 parent 7fe5229 commit 7b3e67def0312416ed24f5545b63164443130bce @benvium benvium committed with mkonicek Dec 2, 2016
@@ -411,6 +411,23 @@ class TextExample extends React.Component {
This very long text should be truncated with dots in the beginning.
</Text>
</UIExplorerBlock>
+ <UIExplorerBlock title="Include Font Padding">
+ <View style={{flexDirection: 'row', justifyContent: 'space-around', marginBottom: 10}}>
+ <View style={{alignItems: 'center'}}>
+ <Text style={styles.includeFontPaddingText}>
+ Ey
+ </Text>
+ <Text>Default</Text>
+ </View>
+ <View style={{alignItems: 'center'}}>
+ <Text style={[styles.includeFontPaddingText, {includeFontPadding: false, marginLeft: 10}]}>
+ Ey
+ </Text>
+ <Text>includeFontPadding: false</Text>
+ </View>
+ </View>
+ <Text>By default Android will put extra space above text to allow for upper-case accents or other ascenders. With some fonts, this can make text look slightly misaligned when centered vertically.</Text>
+ </UIExplorerBlock>
</UIExplorerPage>
);
}
@@ -421,6 +438,14 @@ var styles = StyleSheet.create({
left: 5,
backgroundColor: 'rgba(100, 100, 100, 0.3)'
},
+ includeFontPaddingText: {
+ fontSize: 120,
+ fontFamily: 'sans-serif',
+ backgroundColor: '#EEEEEE',
+ color: '#000000',
+ textAlignVertical: 'center',
+ alignSelf: 'center',
+ }
});
module.exports = TextExample;
@@ -66,6 +66,13 @@ const TextStylePropTypes = {
textAlignVertical: ReactPropTypes.oneOf(
['auto' /*default*/, 'top', 'bottom', 'center']
),
+ /**
+ * Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders.
+ * With some fonts, this padding can make text look slightly misaligned when centered vertically.
+ * For best results also set `textAlignVertical` to `center`. Default is true.
+ * @platform android
+ */
+ includeFontPadding: ReactPropTypes.bool,
textDecorationLine: ReactPropTypes.oneOf(
['none' /*default*/, 'underline', 'line-through', 'underline line-through']
),
@@ -143,6 +143,11 @@ public void setBorderColor(ReactTextView view, int index, Integer color) {
view.setBorderColor(SPACING_TYPES[index], rgbComponent, alphaComponent);
}
+ @ReactProp(name = "includeFontPadding", defaultBoolean = true)
+ public void setIncludeFontPadding(ReactTextView view, boolean includepad) {
+ view.setIncludeFontPadding(includepad);
+ }
+
@Override
public void updateExtraData(ReactTextView view, Object extraData) {
ReactTextUpdate update = (ReactTextUpdate) extraData;

1 comment on commit 7b3e67d

@teodors
teodors commented on 7b3e67d Jan 6, 2017

I thought I was going mad. Thank you! Now I know that there was in fact extra padding.

Please sign in to comment.