From d80c698bb4636ad0285872bcbd647b007d55ceb8 Mon Sep 17 00:00:00 2001 From: Tim Ford Date: Mon, 15 Aug 2016 21:49:45 -0300 Subject: [PATCH 1/2] Android Letter Spacing fix --- .../react/views/text/ReactTextShadowNode.java | 18 ++++++++++++++++++ .../react/views/text/ReactTextUpdate.java | 14 ++++++++++++++ .../react/views/text/ReactTextView.java | 15 +++++++++++++++ .../textinput/ReactTextInputShadowNode.java | 5 +++++ 4 files changed, 52 insertions(+) diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java index f17ecec5dcbe..5901a30841b6 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java @@ -304,6 +304,7 @@ private static int parseNumericFontWeight(String fontWeightString) { } private float mLineHeight = Float.NaN; + private float mLetterSpacing = Float.NaN; private boolean mIsColorSet = false; private int mColor; private boolean mIsBackgroundColorSet = false; @@ -360,6 +361,15 @@ public ReactTextShadowNode(boolean isVirtual) { } } + public float getLetterSpacing() { + return mLetterSpacing; + } + + public int getFontSize() { + return mFontSize; + } + + // Returns a line height which takes into account the requested line height // and the height of the inline images. public float getEffectiveLineHeight() { @@ -418,6 +428,12 @@ public void setLineHeight(int lineHeight) { markUpdated(); } + @ReactProp(name = ViewProps.LETTER_SPACING, defaultFloat = UNSET) + public void setLetterSpacing(float letterSpacing) { + mLetterSpacing = letterSpacing == UNSET ? Float.NaN : letterSpacing; + markUpdated(); + } + @ReactProp(name = ViewProps.TEXT_ALIGN) public void setTextAlign(@Nullable String textAlign) { if (textAlign == null || "auto".equals(textAlign)) { @@ -588,6 +604,8 @@ public void onCollectExtraUpdates(UIViewOperationQueue uiViewOperationQueue) { UNSET, mContainsImages, getPadding(), + getLetterSpacing(), + getFontSize(), getEffectiveLineHeight(), getTextAlign() ); diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextUpdate.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextUpdate.java index 285ddb3cc091..3ba835a0f33a 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextUpdate.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextUpdate.java @@ -29,6 +29,8 @@ public class ReactTextUpdate { private final float mPaddingRight; private final float mPaddingBottom; private final float mLineHeight; + private final float mLetterSpacing; + private final int mFontSize; private final int mTextAlign; public ReactTextUpdate( @@ -36,6 +38,8 @@ public ReactTextUpdate( int jsEventCounter, boolean containsImages, Spacing padding, + float letterSpacing, + int fontSize, float lineHeight, int textAlign) { mText = text; @@ -45,6 +49,8 @@ public ReactTextUpdate( mPaddingTop = padding.get(Spacing.TOP); mPaddingRight = padding.get(Spacing.END); mPaddingBottom = padding.get(Spacing.BOTTOM); + mLetterSpacing = letterSpacing; + mFontSize = fontSize; mLineHeight = lineHeight; mTextAlign = textAlign; } @@ -77,6 +83,14 @@ public float getPaddingBottom() { return mPaddingBottom; } + public float getLetterSpacing() { + return mLetterSpacing; + } + + public int getFontSize() { + return mFontSize; + } + public float getLineHeight() { return mLineHeight; } diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java index 819db6c69ecb..564efef998ee 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java @@ -18,6 +18,7 @@ import android.widget.TextView; import com.facebook.csslayout.FloatUtil; +import com.facebook.react.uimanager.PixelUtil; import com.facebook.react.uimanager.ReactCompoundView; public class ReactTextView extends TextView implements ReactCompoundView { @@ -30,6 +31,7 @@ public class ReactTextView extends TextView implements ReactCompoundView { private int mDefaultGravityVertical; private boolean mTextIsSelectable; private float mLineHeight = Float.NaN; + private float mLetterSpacing = Float.NaN; private int mTextAlign = Gravity.NO_GRAVITY; public ReactTextView(Context context) { @@ -54,6 +56,19 @@ public void setText(ReactTextUpdate update) { (int) Math.ceil(update.getPaddingRight()), (int) Math.ceil(update.getPaddingBottom())); + float nextLetterSpacing = update.getLetterSpacing(); + int fontSize = update.getFontSize(); + if (!FloatUtil.floatsEqual(mLetterSpacing, nextLetterSpacing)) { + mLetterSpacing = nextLetterSpacing; + if(Float.isNaN(mLetterSpacing)) { + setLetterSpacing((float)0.0); + } else { + //calculate EM from proper font pixels + setLetterSpacing(1+(mLetterSpacing-PixelUtil.toDIPFromPixel(fontSize))/PixelUtil.toDIPFromPixel(fontSize)); + } + } + + float nextLineHeight = update.getLineHeight(); if (!FloatUtil.floatsEqual(mLineHeight, nextLineHeight)) { mLineHeight = nextLineHeight; diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java index 246ce8120fac..7342ed35f1b5 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java @@ -87,6 +87,9 @@ public void measure( (int) Math.ceil(getPadding().get(Spacing.END)), (int) Math.ceil(getPadding().get(Spacing.BOTTOM))); + editText.setLetterSpacing(getLetterSpacing()); + + if (mNumberOfLines != UNSET) { editText.setLines(mNumberOfLines); } @@ -129,6 +132,8 @@ public void onCollectExtraUpdates(UIViewOperationQueue uiViewOperationQueue) { mJsEventCount, mContainsImages, getPadding(), + getLetterSpacing(), + getFontSize(), getEffectiveLineHeight(), mTextAlign ); From bd5c4029f153d3ed9481cb309401b2590836b090 Mon Sep 17 00:00:00 2001 From: Tim Ford Date: Mon, 15 Aug 2016 22:17:51 -0300 Subject: [PATCH 2/2] LETTER SPACING CONSTANT --- .../src/main/java/com/facebook/react/uimanager/ViewProps.java | 1 + 1 file changed, 1 insertion(+) diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java index c344e0fd7594..0f8cacdcf4a8 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java @@ -70,6 +70,7 @@ public class ViewProps { public static final String FONT_STYLE = "fontStyle"; public static final String FONT_FAMILY = "fontFamily"; public static final String LINE_HEIGHT = "lineHeight"; + public static final String LETTER_SPACING = "letterSpacing"; public static final String NEEDS_OFFSCREEN_ALPHA_COMPOSITING = "needsOffscreenAlphaCompositing"; public static final String NUMBER_OF_LINES = "numberOfLines"; public static final String LINE_BREAK_MODE = "ellipsizeMode";