CSS技术分享: 文字在圆形内沿着弧线边界排版 « 张鑫旭-鑫空间-鑫生活

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9352
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

文字环形排版占位图

一、圆形区域文字排版问题

如果容器是正方形，则文字排版很Easy，菜市场的老太太也能实现，因为天热排版就是OK的，例如：

p {
  padding: 10px;
  width: 12em;
  background: deepskyblue;
  color: #fff;
}

实时效果如下：

如果你在其他地方看到zxx或者zhangxinxu文字的内容，说明是盗版的我的文章，欢迎反馈

但是，如果我们设置了巨大的圆角，则文字排版效果就有些惨不忍睹了，例如：

p {
  padding: 10px;
  width: 12em;
  background: deepskyblue;
  color: #fff;
  border-radius: 50%;
}

实时效果如下：

如果你在其他地方看到zxx或者zhangxinxu文字的内容，说明是盗版的我的文章，欢迎反馈

可以看到部分文字直接都看不见了，上下左右留下的间隙也不一致，看起来好难受。

此时，水谷雫托着下巴，对着窗外感叹道：“要是文字可以沿着圆弧的边界排版就好了。”

水谷雫窗外

吉田春满脸泡泡茶壶地回道：“我有办法实现的呢~”

吉田春回视

二、CSS Shapes布局与环形排版

如果对CSS Shapes布局还不太了解，可以参阅我之前这篇热文：“写给自己看的CSS shapes布局教程”。

其中，CSS Shapes布局可以围绕图片布局（根据Alpha通道透明度），这个图片包括渐变，于是乎，我们只需要绘制两个内凹的圆弧径向渐变，然后让文字环绕布局不就好了。

说干就干，首先，我们需要现在文字前面插入两个元素，一个左浮动，一个右浮动，然后绘制内凹的径向渐变。

HTML如下：

<p class="circle">
    <before></before><after></after>
    ...文字内容
</p>

CSS代码如下：

.circle {
    border-radius: 50%;
    width: 207px; height: 250px;
    color: white;
    background-color: deepskyblue;
    padding: 10px;
}
before {
    float: left;
    width: 50%; height: 100%;
    shape-outside: radial-gradient(farthest-side ellipse at right, transparent 100%, red);
}
after {
    float: right;
    width: 50%; height: 100%;
    shape-outside: radial-gradient(farthest-side ellipse at left, transparent 100%, red);
}

结果如下图所示：

围绕圆环示意

您可以狠狠地点击这里：CSS Shapes布局让文字在圆环内排版demo

原理就是构建两个弧形，然后使用CSS Shapes布局让文字沿着这个弧形排列即可。

不要高兴地太早

然后上面的实现仍然有一些局限。

首先容器需要定高，不然左右浮动的元素高度不会存在，或者<before>和<after>元素设置具体的长度值才可以（这样不一定可以正好和形状匹配）。

其次需要在文字前面插入<before>和<after>这两个元素实在是太不方便了，每次都插入两个元素，又啰嗦又不好维护。怎么办，有没有什么优化的方法呢？

试试看使用自定义元素。

三、使用自定义元素优化环形排版

自定义一个名为<zxx-circle>的元素，使用Shadow DOM把<before>和<after>元素藏在自定义元素里面，这样，HTML代码就会很干净了，如下：

<zxx-circle>在CSS ... by zhangxinxu</zxx-circle>

就会有如下图所示的效果了：

围绕圆环示意

同时，如果元素不设置高度，也能有效果，但是，最终的高度不一定精准，我是粗略实现了下，因此，实际开发，如果可以，建议开始设定好高度，体验更好。

JS代码如下：

class HTMLZxxCircleElement extends HTMLElement {
  constructor() {
    self = super();

    let shadow = this.attachShadow({
        mode: 'open'
    });
    
    // 文本内容移动到shadow dom元素中
    let style = document.createElement('style');
    shadow.appendChild(style);
    // 前后元素
    let before = document.createElement('zxx-before');
    let after = document.createElement('zxx-after');
    shadow.prepend(after);
    shadow.prepend(before);
    // 内容
    let content = document.createElement('div');
    shadow.appendChild(content);

    let ro = new ResizeObserver( entries => {
      for (let entry of entries) {
        self._updateRendering();
      }
    });
    
    // 观察当前元素尺寸变化
    ro.observe(this);
  }
  
  connectedCallback() {
    // 执行渲染更新
    this._updateRendering();
  }
  _updateRendering() {
    let shadow = this.shadowRoot;
    let content = shadow.querySelector('div');
    let before = shadow.querySelector('zxx-before');
    before.style.height = 'auto';
    // 内容更新
    content.innerHTML = this.innerHTML;
    // 此时内容高度
    let heightContent = parseFloat(getComputedStyle(content).height);
    let heightBefore = parseFloat(getComputedStyle(before).height);
    
    if (heightContent == 0) {
        return;
    }
    
    // 没有设置具体的高度值
    if (heightBefore == 0 && heightContent != 0) {
        // 同样面积的椭圆的高度是？
        // s = π×a×b
        let height = (2 *  heightContent * 2 / Math.PI) + 'px';
        
        console.warn('<zxx-circle> no height, set it to ' + height + '!');
        this.style.height = height;
    }
    before.removeAttribute('style');
    // 样式设置
    shadow.querySelector('style').textContent = `:host {
    border-radius: 50%;
}
zxx-before,
zxx-after {
    width: 50%; min-height: 100%; height: ${heightContent}px;
}
zxx-before {
    float: left;
    shape-outside: radial-gradient(farthest-side ellipse at right, transparent 100%, red);
}
zxx-after {
    float: right;
    shape-outside: radial-gradient(farthest-side ellipse at left, transparent 100%, red);
}`;
  }
}
// 定义zxx-circle标签元素
customElements.define('zxx-circle', HTMLZxxCircleElement);