【问题标题】:Automatic, soft hyphenation in CSSCSS 中的自动软断字
【发布时间】:2017-07-23 09:45:40
【问题描述】:

去年12月,CSS3 Hyphens支持据说是came to Chrome。此外,除了其他主要浏览器之外,IE 也应该在船上。

更新:收到以下答复后,我了解到我误解了 caniuse.com 上的脚注。
它说:'目前仅支持 Mac 上的 auto 值'
我将其解释为 '在 Mac 上,目前仅支持 auto 值'
但真正的意思是'Mac 是目前唯一支持auto 值的平台'/更新。

但是,我在实现 Chrome 或 IE 时遇到了问题。我已经阅读了几篇较旧(现在有些过时)的 SE 帖子(123)并制作了 a jsfiddle,不幸的是,它只能在 Firefox 中产生预期的结果。

据推测,我的目标语言、挪威语 (lang="no") 和英语 (lang="en") 的连字符 should work in IE 无需手动添加字典 (hyphenate-resource)。

是否可以对小提琴进行修改,以使连字符在 IE 和/或 Chrome 中无需字典即可工作?如果没有,有人知道挪威语有用的hyphenate-resource 吗?

如果不是,我们将不得不考虑使用 hypherhyphenator,但我宁愿避免使用 JavaScript 实现,因为我应该从浏览器中获得本机。

【问题讨论】:

  • 您好,您使用的连字符的字符代码是什么?我没有安装 no keyboard ,但是从您的屏幕截图中,呈现的连字符看起来与 ansi 字符不同 - 。我在非 Windows 键盘上生成的旧法语内容也遇到了同样的问题。 Win+[空格] 选择键盘,选择美国或英国英语。这里是英文字符-,这里是法文-;从 Windows 10 机器。确保您的页面具有 utf-8 内容类型元数据。
  • @RobParsons 我不提供连字符,浏览器 (Firefox) 提供。如果我要手动插入软连字符,我会使用­ HTML 元素。但我在这里想要实现的是避免手动操作。
  • 什么是 IE 中的编码设置...请参阅 IE 中的视图>编码菜单。 Unicode - 应选择 utf 8。另外,检查 Internet 选项>常规选项卡,辅助功能按钮,取消选中/选中“忽略网页上指定的字体样式”。你能发布一个jsfiddle或sn-p吗?
  • @RobParsons 我已经发布了一个 jsfiddle,在文本中查找“fiddle”(我将其重命名为 jsfiddle)
  • 刚刚检查了 iOS Safari 中的 jsfiddle,连字符在那里工作,也适用于挪威语。但 Safari 并不是我当前项目的主要目标。

标签: google-chrome internet-explorer internationalization cross-browser css-hyphens


【解决方案1】:
<!DOCTYPE html>
<html lang="nb">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-language" content="no"/>
    <title>hyphen tests</title>
    <style>
        html,body{height:100%}
        .uc {
        font-family: Code2000, "TITUS Cyberbit Basic", "Doulos SIL",
            "Chrysanthi Unicode", "Bitstream Cyberbit",
            "Bitstream CyberBase", Thryomanes, Gentium, GentiumAlt,
            "Lucida Grande", "Arial Unicode MS", "Microsoft Sans Serif",
            "Lucida Sans Unicode";
        font-family /**/:inherit; /* resets fonts for everyone but IE6 */
        font-size:100%;
}
        body{
        }

        div.main{-moz-column-count:6;
                 -webkit-column-count:6; 
                 column-count:6;

        }


        section, article {
            margin: 0 0;
            outline: 1px orange solid;
        }

h2,p{
    margin:0;
    text-align:justify;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  /*word-break:break-all;*/
}
    </style>
</head>
<body class="uc">
    <script>document.write(document.documentElement.getAttribute('lang'));</script>
    <div class="main">
        <section>
            <h2>none</h2>
            <p>Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <h2>no</h2>
            <p lang="no">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <h2>nn</h2>
            <p lang="nn">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <h2>nb</h2>
            <p lang="nb">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
            <!--<p>– Denne planen vil skape nye muligheter for folk og lokalsamfunn, og bidra til vekst og utvikling både i byer og distrikter, sier Sanner.</p>
            <p>Planen for lokalisering av statlige arbeidsplasser er et vedlegg til stortingsmeldingen «Bærekraftige byer og sterke distrikter».</p>
            <p>– Så langt i denne regjeringsperioden er det vedtatt å flytte ut eller etablere om lag 630 statlige arbeidsplasser utenfor Oslo. Planen beskriver også hvordan regjeringen nå skal utrede ytterligere etablering av statlig virksomhet i hele landet, sier Sanner.</p>
            <p>– Når statlige virksomheter plasseres i hele landet, kan flere få spennende karrieremuligheter i det lokalmiljøet de kommer fra, og dermed kunne flytte hjem etter fullført høyere utdanning. Med ny teknologi kan statlige virksomheter drives flere steder, og samtidig være tilgjengelige både for publikum og samarbeidspartnere, sier Sanner.</p>
            <p>De nye oppgavene som kan bli flyttet, finnes innen blant annet kunnskapsforvaltning, landbruksforvaltning og administrative tjenester. Blant disse virksomhetene er Politihøgskolen, Språkrådet, Fredskorpset, Likestillings- og diskrimineringsnemnda og deler av NVE.</p>
            <p>- Jeg forstår godt at beskjeder som dette er krevende for de ansatte i disse virksomhetene. Nå skal vi sikre gode prosesser videre, der de ansatte skal bli hørt. Vi har også gode ordninger for ansatte i omstilling, sier Sanner.</p>-->
        </section>
        <section title="English">
            <h2>none</h2>
            <p>As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
            <h2>en</h2>
            <p lang="en">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
            <h2>en-au</h2>
            <p lang="en-au">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
            <h2>en-gb</h2>
            <p lang="en-gb">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
        </section>
        <section title="German">
            <h2>none</h2>
            <p>Als Designer versuchen, Erstellen von funktionalen arbeiten, sind oft wir verpflichtet, unsere Entwürfe als fertige wie möglich aussehen zu machen.</p>
            <h2>de</h2>
            <p>Als Designer versuchen, Erstellen von funktionalen arbeiten, sind oft wir verpflichtet, unsere Entwürfe als fertige wie möglich aussehen zu machen.</p>
        </section>
    </div>
</body>
</html>

【讨论】:

  • 如何在 Internet Explorer 中获得这些结果?我在 Windows 7(版本 6.1.7601)上安装了 Internet Explorer 11(版本 11.0.9600.18537),并且在使用您的标记时,nnnb 上没有连字符。您是否安装了额外的语言包,如果是,您有链接吗?
  • 问题在于浏览器和插件如何确定内容语言设置......谷歌翻译使用与 http 等效的内容语言标签并将“否”识别为挪威语......浏览器出现在 html 标记或最近的父级上使用 lang 或 xml:lang 属性。 Win10 上的 IE11 只识别 'nn' 和 'nb' 代码。我没有在 Win7/IE11 上测试过。在 Win7 上安装可选语言包,从 Windows 更新的可选更新部分。在给定的代码上,尝试更改 Meta content-language、html lang 和 el.lang 元素中的语言代码。
  • 好的,谢谢。如果不是 Win7/IE11,右上角的截图是什么操作系统和浏览器?是 IE 吧?
  • 嗨,Windows 10 ..... 使用 winkey+箭头键来平铺您的窗口。这是一个屏幕截图,显示了运行相同(本地)站点的主要浏览器,具有相同的站点。 FX of rough 使用自己的语言包。我安装了大约 30 个 MS 语言包.... 本机操作系统语言 en-us。安装了 nn 和 nb 键盘。仅安装了 nb 的 MS 语言包(包括拼写检查器)。
  • 在“真实”世界中......对于小型企业的单页网站,您不会因为内容中出现两种或多种语言而混淆访问者......要么使用服务器端代码重定向到单独的页面(在请求标头的用户接受列表中),要么包含内容语言元或标头,以便 userAgent 翻译器可以检测内容语言并为他们翻译。
【解决方案2】:

恐怕 Chrome 目前只支持 Mac 上的hyphens: auto(而mdn 似乎也只支持英文,不确定)。支持 Windows/Android/Chrome 操作系统的工作是 here

要让hyphens: auto 在 IE 中工作,您必须安装正确的语言包。我还必须使用lang="nn"lang="nb"lang="no" 似乎没有用。

注意:我实际上并不知道我在说什么,这只是来自实验。

【讨论】:

    【解决方案3】:

    只要您需要支持浏览器而不是相反的解决方法(无 CSS 解决方案):

    对来自ICUline break interator 使用服务器端连字符,然后插入&lt;wbr&gt; tags。 像 PHP support 这样的脚本语言。

    然后浏览器将按照指示进行hypthenation,并且不需要客户端JS库,您可以使用CSS完成其他所有操作。

    【讨论】:

      猜你喜欢
      • 2023-03-09
      • 1970-01-01
      • 1970-01-01
      • 2020-12-16
      • 2019-11-23
      • 2014-08-04
      • 1970-01-01
      • 1970-01-01
      • 2017-04-18
      相关资源
      最近更新 更多