revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-09-19 16:58:48 +02:00
Code Issues Releases Wiki Activity

Improve line breaking behavior in Firefox and Chrome under complex conditions

Browse source 
Summary: See <https://github.com/phacility/phabricator/pull/854>. In some situations, `line-break: anywhere` produces better behavior than `word-break: break-all`. It never appears to produce worse behavior.

Test Plan:
  - Break behavior changes if a line contains "<span />" elements caused by syntax highlighting. This CSS adjustment only appears to apply to text with internal "<span />" elements.
  - This specifically impacts certain internal breakpoints adjacent to punctuation, so the test case is highly specific. Generic test cases with latin word characters do not evidence any behavioral changes.
  - This change appears to have no impact on Safari, which uses the better behavior in all cases.
  - Before Patch: In Firefox and Chrome, this specific change breaks awkwardly. There is more room for text to fit on the broken line:

Firefox

{F7480567}

Chrome

{F7480568}

  - After Patch: Firefox and Chrome break the line better. Here's Firefox:

{F7480569}

  - Additional context:

Safari Behavior (Unchanged)

{F7480570}

Chrome with no highlighting (desirable behavior). Firefox does the same thing.

{F7480571}

Also tested other cases, which seem never-worse in any browser.

{F7480574}

Differential Revision: https://secure.phabricator.com/D21247
This commit is contained in:
epriestley 2020-05-13 11:16:56 -07:00
parent 3dea92081b
commit 1da54837ea
3 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
resources/celerity/map.php
View file

@ -9,7 +9,7 @@ return array(
'names' => array(
'conpherence.pkg.css' => '0e3cf785',
'conpherence.pkg.js' => '020aebcf',
'core.pkg.css' => '1b80c45d',
'core.pkg.css' => 'a560707d',
'core.pkg.js' => '1e667bcb',
'dark-console.pkg.js' => '187792c2',
'differential.pkg.css' => 'd71d4531',
@ -115,7 +115,7 @@ return array(
'rsrc/css/application/uiexample/example.css' => 'b4795059',
'rsrc/css/core/core.css' => '1b29ed61',
'rsrc/css/core/remarkup.css' => 'c286eaef',
'rsrc/css/core/syntax.css' => '220b85f9',
'rsrc/css/core/syntax.css' => '548567f6',
'rsrc/css/core/z-index.css' => '612e9522',
'rsrc/css/diviner/diviner-shared.css' => '4bd263b0',
'rsrc/css/font/font-awesome.css' => '3883938a',
@ -172,7 +172,7 @@ return array(
'rsrc/css/phui/phui-pager.css' => 'd022c7ad',
'rsrc/css/phui/phui-pinboard-view.css' => '1f08f5d8',
'rsrc/css/phui/phui-policy-section-view.css' => '139fdc64',
'rsrc/css/phui/phui-property-list-view.css' => '9c477af1',
'rsrc/css/phui/phui-property-list-view.css' => '5adf7078',
'rsrc/css/phui/phui-remarkup-preview.css' => '91767007',
'rsrc/css/phui/phui-segment-bar-view.css' => '5166b370',
'rsrc/css/phui/phui-spacing.css' => 'b05cadc3',
@ -869,7 +869,7 @@ return array(
'phui-pager-css' => 'd022c7ad',
'phui-pinboard-view-css' => '1f08f5d8',
'phui-policy-section-view-css' => '139fdc64',
'phui-property-list-view-css' => '9c477af1',
'phui-property-list-view-css' => '5adf7078',
'phui-remarkup-preview-css' => '91767007',
'phui-segment-bar-view-css' => '5166b370',
'phui-spacing-css' => 'b05cadc3',
@ -907,7 +907,7 @@ return array(
'sprite-login-css' => '18b368a6',
'sprite-tokens-css' => 'f1896dc5',
'syntax-default-css' => '055fc231',
'syntax-highlighting-css' => '220b85f9',
'syntax-highlighting-css' => '548567f6',
'tokens-css' => 'ce5a50bd',
'trigger-rule' => '41b7b4f6',
'trigger-rule-control' => '5faf27b9',
@ -1095,9 +1095,6 @@ return array(
'phabricator-diff-path-view',
'phuix-button-view',
),
'220b85f9' => array(
'syntax-default-css',
),
'225bbb98' => array(
'javelin-install',
'javelin-reactor',
@ -1409,6 +1406,9 @@ return array(
'phuix-autocomplete',
'javelin-mask',
),
'548567f6' => array(
'syntax-default-css',
),
'55a24e84' => array(
'javelin-install',
'javelin-dom',

2
webroot/rsrc/css/core/syntax.css
View file

@ -12,7 +12,7 @@
.remarkup-code td > span {
display: inline;
word-break: break-all;
line-break: anywhere;
}
.remarkup-code .rbw_r { color: red; }

2
webroot/rsrc/css/phui/phui-property-list-view.css
View file

@ -364,7 +364,7 @@ td.old .jupyter-cell-code-line {
margin: 4px 0;
padding: 8px;
white-space: pre-wrap;
word-break: break-all;
line-break: anywhere;
}
.jupyter-output-stderr {