React Native Font Outline/Textshadow

React Native font outline / textShadow

Yes it is possible through the following properties:

textShadowColor color
textShadowOffset ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )
textShadowRadius ReactPropTypes.number

https://facebook.github.io/react-native/docs/text.html

Actual completed pull request:
https://github.com/facebook/react-native/pull/4975

Adding a colored border (not shadow) to the label text on a Highcharts treemap

There is no default Highcharts way to deal with IE rendering poorly text-shadow. It is possible to set useHTML to true and add multiple labels that will be imitating shadow. (Looks fine in Chrome, Firefox and IE11).

Example: http://jsfiddle.net/yzLavxc9/2/

....
dataLabels: {
                    useHTML: true,
                    formatter: function () {
                        return '<div class=dataLabelContainer><div style="position: absolute; top: -1px; left: 1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: 1px; left: 1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: 1px; left: -1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: -1px; left: -1px; color: #000;">'+this.key+'</div><div style="position: absolute; color: #fff;">'+this.key+'</div></div><div style="color: #fff;">'+this.key+'</div></div>';
                    },
                    enabled: true,
                    align: 'center',
                    style: {
                        fontSize: '20px',
....

CSS Font Border?

There's an experimental CSS property called text-stroke, supported on some browsers behind a -webkit prefix.

h1 {    -webkit-text-stroke: 2px black; /* width and color */
    font-family: sans; color: yellow;}

<h1>Hello World</h1>

---

Related Topics