CSS 中的自动软断字
Automatic, soft hyphenation in CSS
去年12月,CSS3Hyphens
support supposedly came to Chrome。此外,除了其他主要浏览器之外,IE 也应该加入。
更新: 收到以下答案后,我明白我误解了 caniuse.com 上的脚注。
上面写着:'Only supports the auto
value on Mac for now'。
我将其解释为'On the Mac, only the auto
value is supported for now'的意思。
但真正的意思是'The Mac is the only platform where the auto
value is supported for now'。 /更新。
但是,我在 Chrome 或 IE 上执行时遇到了问题。我读过几篇较早的(现在有些过时的)SE 帖子(1, , 3) and made a jsfiddle 不幸的是,它只能在 Firefox 中产生预期的结果。
据推测,我的目标语言挪威语 (lang="no"
) 和英语 (lang="en"
) 的断字 should work in IE 无需手动添加词典 (hyphenate-resource
)。
是否可以对 fiddle 进行修改,以便在没有词典的情况下在 IE and/or Chrome 中使用断字?如果没有,有人知道有用的 hyphenate-resource
挪威语吗?
如果不是,我们将不得不考虑使用 hypher or hyphenator,但我宁愿避免 JavaScript 实现我应该从浏览器中获取的内容。
恐怕 Chrome 目前仅支持 Mac 上的 hyphens: auto
(以及 mdn seems to imply only for english as well, not sure). The job to support it for Windows/Android/Chrome OS is here.
要使 hyphens: auto
在 IE 中工作,您必须安装正确的语言包。我还必须使用 lang="nn"
或 lang="nb"
。 lang="no"
似乎没有用。
注意:我其实并不知道我在说什么,这只是来自实验。
<!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>
解决方法(无 CSS 解决方案)只要您需要支持浏览器而不是相反:
在 line break interator from ICU, and insert <wbr>
tags 中使用服务器端断字。
像 PHP support 这样的脚本语言。
然后浏览器将按照指示进行连字符,并且不需要客户端 JS 库,您可以使用 CSS.
完成其他所有操作
去年12月,CSS3Hyphens
support supposedly came to Chrome。此外,除了其他主要浏览器之外,IE 也应该加入。
更新: 收到以下答案后,我明白我误解了 caniuse.com 上的脚注。
上面写着:'Only supports the auto
value on Mac for now'。
我将其解释为'On the Mac, only the auto
value is supported for now'的意思。
但真正的意思是'The Mac is the only platform where the auto
value is supported for now'。 /更新。
但是,我在 Chrome 或 IE 上执行时遇到了问题。我读过几篇较早的(现在有些过时的)SE 帖子(1,
据推测,我的目标语言挪威语 (lang="no"
) 和英语 (lang="en"
) 的断字 should work in IE 无需手动添加词典 (hyphenate-resource
)。
是否可以对 fiddle 进行修改,以便在没有词典的情况下在 IE and/or Chrome 中使用断字?如果没有,有人知道有用的 hyphenate-resource
挪威语吗?
如果不是,我们将不得不考虑使用 hypher or hyphenator,但我宁愿避免 JavaScript 实现我应该从浏览器中获取的内容。
恐怕 Chrome 目前仅支持 Mac 上的 hyphens: auto
(以及 mdn seems to imply only for english as well, not sure). The job to support it for Windows/Android/Chrome OS is here.
要使 hyphens: auto
在 IE 中工作,您必须安装正确的语言包。我还必须使用 lang="nn"
或 lang="nb"
。 lang="no"
似乎没有用。
注意:我其实并不知道我在说什么,这只是来自实验。
<!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>
解决方法(无 CSS 解决方案)只要您需要支持浏览器而不是相反:
在 line break interator from ICU, and insert <wbr>
tags 中使用服务器端断字。
像 PHP support 这样的脚本语言。
然后浏览器将按照指示进行连字符,并且不需要客户端 JS 库,您可以使用 CSS.
完成其他所有操作