fix zalgo properly! remove ugly regexp hacks for detecting combining diacritics and instead set the right font ordering, as Arial combines nicely with Myriad Pro whilst Helvetica doesn't. (Myriad Pro itself has no combining diacritic characters)

ara4n · ara4n · commit cd040ae0ddb5 · 2015-11-30T01:13:59.000Z
diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css
@@ -22,7 +22,12 @@ html {
 }
 
 body {
-    font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
+    /* Myriad Pro lacks combining diacritics, so these will fall through
+       to the next font.  Helevetica's diacritics however do not combine
+       nicely with Myriad Pro (on OSX, at least) and result in a huge
+       horizontal mess.  Arial empirically gets it right, hence prioritising
+       Arial here. */
+    font-family: 'Myriad Pro', Arial, Helvetica, Sans-Serif;
     font-size: 16px;
     color: #454545;
     border: 0px;
diff --git a/src/skins/vector/css/molecules/EventAsTextTile.css b/src/skins/vector/css/molecules/EventAsTextTile.css
@@ -16,4 +16,5 @@ limitations under the License.
 
 .mx_EventAsTextTile {
     opacity: 0.5;
+    overflow-y: hidden;
 }
diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/molecules/EventTile.css
@@ -45,6 +45,7 @@ limitations under the License.
     font-size: 14px;
     margin-bottom: 4px;
     display: block;
+    overflow-y: hidden;
 }
 
 .mx_EventTile .mx_MessageTimestamp {
@@ -64,6 +65,7 @@ limitations under the License.
 .mx_MessageTile_content {
     display: block;
     margin-right: 100px;
+    overflow-y: hidden;
 }
 
 /* Various markdown overrides */
diff --git a/src/skins/vector/css/molecules/MemberInfo.css b/src/skins/vector/css/molecules/MemberInfo.css
@@ -37,8 +37,10 @@ limitations under the License.
 }
 
 .mx_MemberInfo_profileField {
-    opacity: 0.6;
+    font-color: #999999;    
     font-size: 14px;
+    position: relative;
+    background-color: #fff;
 }
 
 .mx_MemberInfo_buttons {
diff --git a/src/skins/vector/css/molecules/MemberTile.css b/src/skins/vector/css/molecules/MemberTile.css
@@ -98,10 +98,6 @@ limitations under the License.
     opacity: 0.25;
 }
 
-.mx_MemberTile_zalgo {
-    font-family: Helvetica, Arial, Sans-Serif;
-}
-
 .mx_MemberTile:hover .mx_MessageTimestamp {
     display: block;
 }
diff --git a/src/skins/vector/css/molecules/MessageComposer.css b/src/skins/vector/css/molecules/MessageComposer.css
@@ -59,7 +59,7 @@ limitations under the License.
     box-shadow: none;
 
     /* needed for FF */
-    font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
+    font-family: 'Myriad Pro', Arial, Helvetica, Sans-Serif;
 }
 
 /* hack for FF as vertical alignment of custom placeholder text is broken */
diff --git a/src/skins/vector/css/molecules/RoomHeader.css b/src/skins/vector/css/molecules/RoomHeader.css
@@ -111,6 +111,7 @@ limitations under the License.
 
 .mx_RoomHeader_nametext {
     display: inline-block;
+    overflow-y: hidden;
 }
 
 .mx_RoomHeader_settingsButton {
diff --git a/src/skins/vector/css/molecules/SenderProfile.css b/src/skins/vector/css/molecules/SenderProfile.css
@@ -13,8 +13,3 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-
-.mx_SenderProfile_zalgo {
-    font-family: Helvetica, Arial, Sans-Serif;
-    display: table-row ! important;
-}
diff --git a/src/skins/vector/css/organisms/MemberList.css b/src/skins/vector/css/organisms/MemberList.css
@@ -45,7 +45,7 @@ limitations under the License.
 }
 
 .mx_MemberList_invite {
-    font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
+    font-family: 'Myriad Pro', Arial, Helvetica, Sans-Serif;
     border-radius: 3px;
     border: 1px solid #f0f0f0;
     padding: 9px;
diff --git a/src/skins/vector/views/molecules/SenderProfile.js b/src/skins/vector/views/molecules/SenderProfile.js
@@ -17,11 +17,6 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var classNames = require("classnames");
-
-// The Lato WOFF doesn't include sensible combining diacritics, so Chrome chokes on rendering them.
-// Revert to Arial when this happens, which on OSX works at least.
-var zalgo = /[\u0300-\u036f\u1ab0-\u1aff\u1dc0-\u1dff\u20d0-\u20ff\ufe20-\ufe2f]/;
 
 module.exports = React.createClass({
     displayName: 'SenderProfile',
@@ -30,18 +25,12 @@ module.exports = React.createClass({
         var mxEvent = this.props.mxEvent;
         var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
 
-        var classes = classNames({
-            mx_SenderProfile: true,
-            // taken from https://en.wikipedia.org/wiki/Combining_character
-            mx_SenderProfile_zalgo: zalgo.test(name),
-        });
-
         var msgtype = mxEvent.getContent().msgtype;
         if (msgtype && msgtype == 'm.emote') {
             name = ''; // emote message must include the name so don't duplicate it
         }
         return (
-            <span className={classes}>
+            <span className="mx_SenderProfile">
                 {name} { this.props.aux }
             </span>
         );

Original file line number	Diff line number	Diff line change
`@@ -16,4 +16,5 @@ limitations under the License.`
`16`	`16`
`17`	`17`	`.mx_EventAsTextTile {`
`18`	`18`	`opacity: 0.5;`
	`19`	`+ overflow-y: hidden;`
`19`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,6 +45,7 @@ limitations under the License.`
`45`	`45`	`font-size: 14px;`
`46`	`46`	`margin-bottom: 4px;`
`47`	`47`	`display: block;`
	`48`	`+ overflow-y: hidden;`
`48`	`49`	`}`
`49`	`50`
`50`	`51`	`.mx_EventTile .mx_MessageTimestamp {`
`@@ -64,6 +65,7 @@ limitations under the License.`
`64`	`65`	`.mx_MessageTile_content {`
`65`	`66`	`display: block;`
`66`	`67`	`margin-right: 100px;`
	`68`	`+ overflow-y: hidden;`
`67`	`69`	`}`
`68`	`70`
`69`	`71`	`/* Various markdown overrides */`
Original file line number	Diff line number	Diff line change
`@@ -37,8 +37,10 @@ limitations under the License.`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`.mx_MemberInfo_profileField {`
`40`		`- opacity: 0.6;`
	`40`	`+ font-color: #999999;`
`41`	`41`	`font-size: 14px;`
	`42`	`+ position: relative;`
	`43`	`+ background-color: #fff;`
`42`	`44`	`}`
`43`	`45`
`44`	`46`	`.mx_MemberInfo_buttons {`
Original file line number	Diff line number	Diff line change
`@@ -98,10 +98,6 @@ limitations under the License.`
`98`	`98`	`opacity: 0.25;`
`99`	`99`	`}`
`100`	`100`
`101`		`-.mx_MemberTile_zalgo {`
`102`		`- font-family: Helvetica, Arial, Sans-Serif;`
`103`		`-}`
`104`		`-`
`105`	`101`	`.mx_MemberTile:hover .mx_MessageTimestamp {`
`106`	`102`	`display: block;`
`107`	`103`	`}`
Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ limitations under the License.`
`59`	`59`	`box-shadow: none;`
`60`	`60`
`61`	`61`	`/* needed for FF */`
`62`		`- font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;`
	`62`	`+ font-family: 'Myriad Pro', Arial, Helvetica, Sans-Serif;`
`63`	`63`	`}`
`64`	`64`
`65`	`65`	`/* hack for FF as vertical alignment of custom placeholder text is broken */`
Original file line number	Diff line number	Diff line change
`@@ -111,6 +111,7 @@ limitations under the License.`
`111`	`111`
`112`	`112`	`.mx_RoomHeader_nametext {`
`113`	`113`	`display: inline-block;`
	`114`	`+ overflow-y: hidden;`
`114`	`115`	`}`
`115`	`116`
`116`	`117`	`.mx_RoomHeader_settingsButton {`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ limitations under the License.`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`.mx_MemberList_invite {`
`48`		`- font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;`
	`48`	`+ font-family: 'Myriad Pro', Arial, Helvetica, Sans-Serif;`
`49`	`49`	`border-radius: 3px;`
`50`	`50`	`border: 1px solid #f0f0f0;`
`51`	`51`	`padding: 9px;`