Repository: flutter
Issue: TextSpan backgroundColor with special Arabic character are not displayed correctly 
Labels: framework,engine,a: internationalization,a: quality,a: typography,has reproducible steps,P2,found in release: 3.7,found in release: 3.9,team-engine,triaged-engine

When using many TextSpan with background color being set, a transparent border appears around the spans and sometimes it's gone depending on the font size. It will be even worse when using Arabic text that contains "Tashkeel - which are special Arabic characters", there will be more gaps between the spans specially if the alginment is not set to left. As may I have noticed, when span splitted into more than one line, things become worse. 


**Steps to Reproduce**

1. To test for Arabic texts, first download an Arabic font. 
http://fonts.cooltext.com/Downloader.aspx?ID=11182

2. Create "fonts" folder in the application and move the font file there:

3. Define the font in pubspec.yaml

```
  fonts:
    - family: Andalus
      fonts:
        - asset: fonts/andlso.ttf
```

- Note: using the default font with Arabic texts will mess up the background color. That's why you need to download the font.

4. Use this code in main.dart:

```dart
import 'package:flutter/material.dart';

void main() => runApp(MainApp());

class MainApp extends StatefulWidget {
  @override
  _MainAppState createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  final _arrText = [
    
    /* English text */
    // 'this is sentence one. ',
    // 'sentence 2 is here. ',
    // 'and here is sentence 3'

    /* Arabic text without Tashkeel */
    // 'البرمجة هواية جميلة جدا ',
    // 'إلا أن الكثيرون يستصعبونها بشكل كبير',
    // 'وإني لأراها شيقة سهلة',

    /* Arabic text with Taskeel */
    'البَرْمَجةُ هِوَايَةٌ جَمِيِلَةٌ جِدّاً ',
    'إلاَ أنّ الكثيرونَ يستصعبونها بشكلٍ كبيرٍ ',
    'وإنيِ لأراهاَ شيقةً سهلةً' 
  ];

  var _fontSize = 58.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextSpan bg Bug'),
        ),
        body: Container(
          // color: Colors.brown,
          padding: EdgeInsets.all(7), // span background color at the end of the sentence is not respecting this padding
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    child: Text('-'),
                    onPressed: () => setState(() => _fontSize--),
                  ),
                  RaisedButton(
                    child: Text('+'),
                    onPressed: () => setState(() => _fontSize++),
                  )
                ],
              ),
              RichText(
                textDirection: TextDirection.rtl,
                // for Arabic texts, background color is better when aligned left
                textAlign: TextAlign.center,
                text: TextSpan(
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: _fontSize,
                      fontFamily: 'Andalus', // comment this line when using english texts
                    ),
                    children: [
                      ..._arrText
                          .map(
                            (span) => TextSpan(
                              text: span,
                              style: TextStyle(
                                backgroundColor: Colors.lightBlue,
                                fontFamily: 'Andalus', // comment this line when using english texts
                              ),
                            ),
                          )
                          .toList()
                    ]),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

**Screenshots**

English Text:
![english](https://user-images.githubusercontent.com/51426549/65296348-cf288180-db6c-11e9-9646-188b5aa461dd.jpg)

Arabic Text with no "Tashkeel":
![arabic_no_tashkeel](https://user-images.githubusercontent.com/51426549/65296344-cf288180-db6c-11e9-8426-56548c0e4ac7.png)

Arabic Text with "Tashkeel":
![arabic_tashkeel](https://user-images.githubusercontent.com/51426549/65296346-cf288180-db6c-11e9-942d-e4577e014edf.jpg)


```
[√] Flutter (Channel stable, v1.9.1+hotfix.2, on Microsoft Windows [Version 10.0.17763.678], locale en-US)
    • Dart version 2.5.0
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
[√] Android Studio (version 3.4)
    • Flutter plugin version 36.0.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
[√] VS Code (version 1.38.1)
    • Flutter extension version 3.4.1
[√] Connected device (1 available)
• No issues found!
```