OCS富文本的解决方案

作者：彭佳

本文为原创文章，转载请注明作者及出处

背景

OCS(Open Courseware System) 是沪江统一的交互式课件制作软件与教学工具，我们在制作课件的时候往往会对文字使用各种各样的样式。例如：颜色，加粗，上标，下标，下划线，字体，行距，动画效果等，经过多方的考虑最终决定使用 HTML 的通用标准来显示富文本。

• Web 端可以直接使用，成本低廉稳定。

• iOS，Android 端对基本的标签系统也进行了支持，方便使用。

以下文章重点讲述在 Android 上的实现思路，iOS 则可采用类似方案实现。

通过对 Android 源码及文档的解读，发现原生 Android 使用 Parse 库（该库并不在 Android 源码中是属于第三方 org.ccil.cowan.tagsoup）对 HTML 进行解析。但只实现了部分标签，对于 CSS Style 的支持基本上是 0。为解决这些问题，我们对市面上的一些开源库进行了调研。

以下列出代表性的几个作为参考：

开源库	优势	不足
AndroidCoreText	支持图文混排；HTML 标签支持来自于 Android 原生	不支持 CSS 样式解析
XRichText	直接调用 text 方法显示 html；支持自定义超链接，图片；能够自定义图片下载器	不支持 CSS 样式解析
HtmlSpanner	支持 CSS 样式；将 HTML 转换成 Android 能识别的 SpannableString	支持了部分的 CSS 样式，适配等需要做二次开发

综上，我们最终选用 HtmlSpanner 来做富文本的解析。

富文本解析总共分为以下三块:

1. HTML 标签支持

2. CSS 样式支持

3. 多字体支持

HTML标签支持

HtmlSpanner 是在原生库的基础上进行扩展封装的。因此 Android 能支持的标签，这个库一并都支持了。但是在特殊字符的处理上还需要手动的进行替换，特殊字符处理统一封装在 TextUtil 类中。

Android 不支持的一些 HTML 标签，而项目中又用得到的，可在 HtmlSpanner的 registerBuiltInHandlers 方法中进行注册。

CSS样式支持

HtmlSpanner 对 CSS 的样式是支持的，引用了 Cssparser 库来解析 CSS。

源码地址：https://github.com/corgrath/osbcp-css-parser

HtmlSpanner 对 Cssparser 库的使用主要集在 CSSCompiler.java 中，将文本转换成 Rule 的对象。

代码如下：

private void parseCSSFromText(String text, SpanStack spanStack) {
    try {
        for (Rule rule : CSSParser.parse(text)) {
            spanStack.registerCompiledRule(CSSCompiler.compile(rule, getSpanner()));
        }
    } catch (Exception e) {
        Log.e("StyleNodeHandler", "Unparseable CSS definition", e);
    }
}

若在样式表中增加自定义属性也能在该类中进行扩展：

public static StyleUpdater getStyleUpdater(final String key, final String value) {
    if ( "font-family".equals(key)) { //解析文本字体
        return new StyleUpdater() {
            @Override
            public Style updateStyle(Style style, HtmlSpanner spanner) {
                Log.d("CSSCompiler", "Applying style " + key + ": " + value );
                FontFamily family = spanner.getFont( value );
                Log.d("CSSCompiler", "Got font " + family );
                return style.setFontFamily(family);
            }
        };
    }
    ... ...
}

多字体支持

在课件的制作中往往会使用到各类字体，比如中文、日文、韩文、法语等，也会用到一些海报体等艺术字，若在手机中没有包含这些字体时，系统一般会用默认字体来显示，整体的效果也会大打折扣。

常规的做法是将相应的文字生成图片，但是这样的做法会带来诸多的问题：

• 图片数量多，占用空间大

• 适配不一样屏幕则需要多套图片

• 文字动画效果难以实现

Android 也提供了加载外部字体的功能，但该功能在 TextView 上一次只能加载一套字体，并且一个常规的字体库一般都有 20 M 左右，如果一节课中使用多个字体则会对 app 造成极大的负担。

为解决这些问题我们找到了一种较好的方案：

• App 从服务器获取到精简版的字体（只包含需要显示的字体文件），然后构造 HtmlSpanner 对象 。

• HtmlSpanner 在像 SystemFontResolver 对象获取需要的 FontFamily 对象，最终转换成 Android TextView 能够识别的 SpannableString 对象。

流程如下：

第一步，制作精简版字库

精简版字库可以用 Google 提供的一款开源库来解决。

下载地址：https://code.google.com/p/sfntly/

使用起来也十分简单：

java -jar sfnttool.jar -s "需要提取的文字" 原始字体文件.ttf 新字体文件.ttf

执行以上命令即可得到一份精简版的字体文件。

通过对几种字体的提取得出以下数据：

字体	5 字	100 字	500 字	1000 字	原始大小
微软雅黑	10 k	46 k	205 k	422 k	14.7 M
华康娃娃体	8 k	29 k	135 k	284 k	3 M
思源黑体	6 k	24 k	95 k	192 K	8 M

第二步，自定义字体

Android 端默认支持三种字体：monospace、sans、serif。

并有四种表现形式：正常、斜体、粗体、粗斜体。

DroidSans 是默认英文。

DroidSansFallback 字体是 Google 为手机「Android」内建的系统字体，支持繁体中文、简体中文、韩文、日文。

HtmlSpanner 库中 SystemFontResolver 类是用于构造字体对象的。该类中构造了 4 个字体。

代码如图：

public SystemFontResolver() {
    this.defaultFont = new FontFamily("default", Typeface.DEFAULT);
    this.serifFont = new FontFamily("serif", Typeface.SERIF);
    this.sansSerifFont = new FontFamily("sans-serif", Typeface.SANS_SERIF);
    this.monoSpaceFont = new FontFamily("monospace", Typeface.MONOSPACE );
}

自定义字体需要对该类进行一定的扩展，使之能够支持动态加载，释放字体对象。

@Override
public void applyFont(String fontName, String path) {
    if (!TextUtils.isEmpty(fontName) && !TextUtils.isEmpty(path)) {
        if (fontName.startsWith("\"") && fontName.endsWith("\"")) {
            fontName = fontName.substring(1, fontName.length() - 1);
        }
        if (fontName.startsWith("\'") && fontName.endsWith("\'")) {
            fontName = fontName.substring(1, fontName.length() - 1);
        }
        File file = new File(path);
        if (file.exists()) {
            fontName = fontName.toLowerCase();
            customFontMap.put(fontName, new FontFamily(fontName, Typeface.createFromFile(file)));
        }
    }
}

第三步，显示字体

//动态自定义字体
HtmlSpannerHelper.getInstance().getSpanner().getFontResolver().applyFont(getAssets(), "艺术1", "fonts/a1.ttf");
TextView tx2 = (TextView) findViewById(R.id.txt2);
String content1 = "<span style=\" font-family:'艺术1'; font-size:60pt; color:#333333;\">0129fg</span>";
HtmlSpannerHelper.getInstance().setText(tx2, content1);

以上是 OCS 播放器富文本的实现思路，其中我们主要借助 HtmlSpanner 库进行二次开发，下面来看看 HtmlSpanner 库是如何运作的：

HtmlSpanner 剖析

HtmlSpanner 通过注册大量的 Handler 来识别 HTML 的标签，将注册过的标签通过 HtmlCleaner 库进行解析，最终转换成 TextView 能够识别的 Spannable 对象进行显示。

HtmlSpanner 的解析流程：

HtmlSpanner 有很完善的扩展性，例如扩展自定义标签：

registerHandler("span", wrap((new StyledTextHandler())));

参数一为自定义的标签名称，参数二是 TagNodeHandler 的继承类：

public class StyledTextHandler extends TagNodeHandler {
    private Style style;
    public StyledTextHandler() {
        this.style = new Style();
    }
    @Override
    public void beforeChildren(TagNode node, SpannableStringBuilder builder, SpanStack spanStack) {
  ......
    }
}

遇到的坑

1. 行高在不同版本 SDK 中显示不一样

低版本的 Android 系统

Android M 上的显示效果

解决：

自定义一个 LineHeightSpan 引用 android.text.style.LineHeightSpan

重写 chooseHeight 方法：

@Override
public void chooseHeight(CharSequence text, int start, int end, int spanstartv, int v, Paint.FontMetricsInt fm) {
    int extra = 0;
    if (height > 0) {
        extra = Math.round((height - (fm.descent - fm.ascent)));
    } else if (spacingmult > 0) {
        extra = Math.round((fm.descent - fm.ascent) * (spacingmult - 1));
    }
    if (android.os.Build.VERSION.SDK_INT >= 23) {
        if (start == ((Spanned) text).getSpanStart(this)) {
            fm.descent += extra;
            fm.bottom = fm.descent;
        }
    } else {
        fm.descent += extra;
        fm.bottom = fm.descent;
    }
}

2. 文字大小适配

文字大小的解析来源与 FontHandler 与 StyledTextHandler。

在切换横竖屏的时候进行重绘：

//If we have a bottom margin, we insert an extra newline. We'll manipulate the line height
//of this newline to create the margin.
if (useStyle.getMarginBottom() != null) {
    StyleValue styleValue = useStyle.getMarginBottom();
    if (styleValue.getUnit() == StyleValue.Unit.PX) {
        if (styleValue.getIntValue() > 0) {
            appendNewLine(builder);
            stack.pushSpan(new VerticalMarginSpan(styleValue.getIntValue()),
                    builder.length() - 1, builder.length());
        }
    } else {
        if (styleValue.getFloatValue() > 0f) {
            appendNewLine(builder);
            stack.pushSpan(new VerticalMarginSpan(styleValue.getFloatValue()),
                    builder.length() - 1, builder.length());
        }
    }

}

3. 系统资源消耗大

• 显示艺术字时字体文件都在内存中，因此在退出的时候要记得手动 release一下，把资源清理掉。

• 设置文字的时候由于解析富文本、图片下载显示比较耗时，所以使用的是handler 机制。因此也要注意 handler 的泄漏问题，最好是 static 的 handler。

public void setText(final TextView textView, final String text) {
    new Thread(new Runnable() {
        @Override
        public void run() {
            if (textView != null && text != null) {
                Spannable spannable = mSpannable.fromHtml(text);
                Message message = mHandler.obtainMessage();
                SpannableMessage obj = new SpannableMessage(textView, spannable);
                message.obj = obj;
                mHandler.sendMessage(message);
            }
        }
    }).start();
}

后续改进点

• HtmlSpanner 采用 HTMLCleaner 解析库对 HTML 标签进行解析。该库比较庞大，方法数较多，可替换成 SDK 内置的 javax.xml.parsers 库来进行解析。

• HtmlSpanner 库可结合 Picasso 库对图片显示进行优化，使其更强大。

• 在一个标签中存在多个样式属性时 HtmlSpanner 仅解析了第一个 style 属性，可进行 style 合并优化处理。

End

推荐阅读

翻译 | 使用 Soong 来进行 Android 模块的构建

干货 | 沪江学习Android端重构实践

Android核心破解原理详解

专访「Android 首席医生」徐宜生：善于利用工具来解决问题的程序员才是好的工程师