react-native-render-html/src/HTMLDefaultStyles.js at master · MaxMaes/react-native-render-html · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
const BASE_FONT_SIZE = 14;

export function generateDefaultBlockStyles (baseFontSize = BASE_FONT_SIZE) {
    return {
        div: { },
        ul: {
            paddingLeft: 20,
            marginBottom: baseFontSize
        },
        ol: {
            paddingLeft: 20,
            marginBottom: baseFontSize
        },
        iframe: {
            height: 200
        },
        hr: {
            marginTop: baseFontSize / 2,
            marginBottom: baseFontSize / 2,
            height: 1,
            backgroundColor: '#CCC'
        }
    };
}

export function generateDefaultTextStyles (baseFontSize = BASE_FONT_SIZE) {
    return {
        u: { textDecorationLine: 'underline' },
        em: { fontStyle: 'italic' },
        i: { fontStyle: 'italic' },
        b: { fontWeight: 'bold' },
        s: { textDecorationLine: 'line-through' },
        strong: { fontWeight: 'bold' },
        big: { fontSize: baseFontSize * 1.2 },
        small: { fontSize: baseFontSize * 0.8 },
        a: {
            fontSize: baseFontSize,
            textDecorationLine: 'underline',
            color: '#245dc1'
        },
        h1: _generateHeadingStyle(baseFontSize, 2, 0.67),
        h2: _generateHeadingStyle(baseFontSize, 1.5, 0.83),
        h3: _generateHeadingStyle(baseFontSize, 1.17, 1),
        h4: _generateHeadingStyle(baseFontSize, 1, 1.33),
        h5: _generateHeadingStyle(baseFontSize, 0.83, 1.67),
        h6: _generateHeadingStyle(baseFontSize, 0.67, 2.33),
        sub: {
            textAlignVertical: 'top',
            fontSize: baseFontSize * 0.8,
            marginTop: baseFontSize / 2
        },
        sup: {
            textAlignVertical: 'top',
            fontSize: baseFontSize * 0.8,
            marginBottom: baseFontSize / 2
        },
        p: {
            marginTop: baseFontSize,
            marginBottom: baseFontSize
        }
    };
}

/**
* Small utility for generating heading styles
* @param baseFontSize: the basic font size
* @param fontMultiplier: the amount to multiply the font size by
* @param marginMultiplier: the amount to multiply the margin by
* @return a style def for a heading
*/
function _generateHeadingStyle (baseFontSize, fontMultiplier, marginMultiplier) {
    return {
        fontSize: baseFontSize * fontMultiplier,
        marginTop: (baseFontSize * fontMultiplier) * marginMultiplier,
        marginBottom: (baseFontSize * fontMultiplier) * marginMultiplier,
        fontWeight: 'bold'
    };
}