NSAttributedString和html样式(子弹对齐)

在我的iOS应用程序中,我使用NSAttributedString生成项目符号列表。 不幸的是,我正在努力让子弹看起来很可爱。 我的第一个尝试是使用常规文本和unicode字符作为子弹,基本上使用这样的字符串:

var attributedString = NSMutableAttributedString(
    string: "Here is a list of bullets and a paragraph introducing them, note that this paragraph spans multiple linesn" +
    "• This is the first bulletn" +
    "• Here is a second bulletn" +
    "• And here is a third bullet with a lot of text such that it overflows to the next line"
)

结果是这样的:

在这里输入图像描述

我喜欢子弹的外观,但是最后一颗子弹中的溢出文本应该与之前的行对齐,我无法弄清楚如何用纯文本实现这一点(不在上面的段落中应用相同的对齐方式)。

我的第二次尝试是通过NSHTMLTextDocumentType在NSAttributedString中使用html,并使用<ul><li>元素来生成项目符号。

let content = "Here is a list of bullets and a paragraph introducing them, note that this paragraph spans multiple lines" +
    "<ul>" +
         "<li>This is the first bullet</li>" +
         "<li>Here is a second bullet</li>" +
         "<li>And here is a third bullet with a lot of text such that it overflows to the next line</li>" +
    "</ul>"
var attributedString = try! NSMutableAttributedString(
    data: content,
    options: [NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType],
    documentAttributes: nil
)

这解决了第一个问题,但引入了一个新问题:

在这里输入图像描述

子弹现在距离太远(从左边缘和右边的文字)。 我试图使用典型的html / css技巧来修复对齐( <li style="text-indent: -10px;"> ),但这些样式似乎被NSAttributedString忽略。

我试图用一个额外的NSMutableParagraphStyle来解决这个问题,但它看起来好处不大。 这是我试过的:

var paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.firstLineHeadIndent = 0
paragraphStyle.headIndent = 20
attributedString.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: attributedStringRange)

这就是我得到的:

在这里输入图像描述

正如你所看到的,它只会让事情变得更糟,这是我的问题:

  • 它抵消了第二行,但我只想要这种效果,而不是之前的段落(我想我可以通过减少效果的范围来弥补这一点)
  • 我必须猜测/硬编码的偏移量,在我的例子中我选择了20,这是不够的,因为目前的字体设置,这可能会改变
  • 由于某些原因,子弹间距现在完全没有任何原因,所以似乎只是应用香草NSParagraphStyle而不做任何事情,我看不出有什么办法来解决这个问题。
  • 我真正想要的是我的子弹间距与第一个屏幕截图类似,而第二行的溢出缩进看起来像第二行,而不必硬编码精确的像素位置。 你们能帮我吗?

    谢谢


    我不得不将自定义样式添加到列表中,并且这是我最终为NSAttributedString每个项目符号使用的段落样式

    headIndentfirstLineHeadIndent可以更改,但NSTextTab位置应该与headIndent相同

    NSMutableParagraphStyle *const bulletParagraphStyle = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
    bulletParagraphStyle.headIndent = 60;
    bulletParagraphStyle.firstLineHeadIndent = 30;
    NSTextTab *listTab = [[NSTextTab alloc] initWithTextAlignment:NSTextAlignmentNatural location:60 options:@{}];
    bulletParagraphStyle.tabStops = @[listTab];
    

    这个工作假设你的子弹点有一个t后面(然后是文本)

    链接地址: http://www.djcxy.com/p/91957.html

    上一篇: NSAttributedString and html styling (bullet alignment)

    下一篇: Keyframes with Inline Styles ReactJS