Image slicing with SVG images not working on Xcode12 - ios
Xcode 12 just introduced SVG image support and I've been using them without major problems, however when I tried image slicing the chat bubbles so they stretch correctly depending on the number of characters in the text message, it doesn't seem to work, can't find anything on stackoverflow or apple forum yet so just wondering if anyone knows if it is a known issue or Xcode 12 bug?
This is the chat bubble SVG:
<svg width="206" height="80" viewBox="0 0 206 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="20.4998" y="16" width="161.484" height="40" rx="20" fill="lightseagreen"/>
<path d="M186 56C175.984 56 169.984 55 169.984 46H177.984C177.984 50.0156 176.984 52 186 56Z" fill="lightseagreen"/>
</svg>
How it looks in Xcode assets:
When I click 'Show slicing' here's how it looks:
Compare to the usual 'Show slicing' of PNG images which are working fine:
Thanks
Related
SVG sprite not showing on ios iphone ipad
SVG sprite not showing on ios iphone ipad. In android, and on a PC, everything is ok. But on iphone, ipad - just a white screen, how to fix it? <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1080 700" style="enable-background:new 0 0 1080 700;" xml:space="preserve"> <g> <path class="st0 state" data-state="Some text 1" d="M323.3,243.1c8,5,22.6,10,30,12c7.2,1.3,6.9-0.8,14-2c6.6,6.6,18.8,8.9,24,17c2.9,4.3,3.9,7.1,5.6,12.1 c2.9,11.4,12.6,20.4,11.2,32.9c-2.7-0.1-5.4-0.2-8-0.2c-2.6-8.5-5.6-17-7.2-25.8c-3.5,0-9.1-0.1-12.6,0c-2,5-6.4,8.3-8,13 c1,2,4.1,3.9,6,5c1,8.5,8.8,19.2,1.5,26.5c-4.9,5.4-2.2,13.4,1.1,19c5.9,9.3-0.7,18.2-3.6,27.5c-9.9-0.7-18.6-3.6-24-11.8 c-6-0.2-10.9-1.3-17-1.2c1.9-8.2,3.1-12.6,4-21c4.7,4.6,9.6,9.2,17,9c-0.1-4.7,1.5-12-1-17c-3.1-2.7-11.6-9.7-14-10 c0.2-4.3,0.6-11.5,2-19c1.7-8.8,6.5-20.2,7-30c0.3-6.5-3.1-13.2-4-15c-1-0.5-5.7-0.8-9-1c-3.4-0.2-5.5-0.1-7,1c-3.2-4-6-5-12-7 c-1,3-2.8,9.2-2,12c0,2,2.2,3.4,3,6c0.6,1.9,0,3.3,0,5c-13.5-0.3-24.7,0.9-38.1-0.9c-6.4-1.7-10.9-7.1-16.4-10.3 c-3-1.5-4.3-2.7-7.4-3.8c0-3-0.1-4.1,0-7c2.2,0,16.5,6.2,33,4C304.7,260.2,318.4,249.8,323.3,243.1z"/> </g> <g> <path class="st1 state" data-state="Some text 2" d="M560.8,149.4c2.5-2.3,5.8-0.3,8.3,0.8c4.8,2.6,10.2,4.3,14.6,7.5c4.1,3.8,7.9,8.7,13.7,9.9 c9.8,1.4,20.1,0.2,29.5,4c4.4,2.9,7.9,6.9,11.5,10.7c5.3,5.7,6.8,13.6,10.4,20.3c1.7,3.5,6,3.9,9.1,5.4 c7.7,2.7,14.5,7.7,22.3,10.1c7.9,2.6,14.6,7.5,22.3,10.6c14.5,4.7,28.3,11.5,40.5,20.6c5.8,4.2,12.9,6.8,17.7,12.3 c1.8,2.1-0.6,4.6-1.2,6.6l-0.3,0.7c-4,7.6-5,16.7-10.4,23.5c-5,5.5-12.9,6.4-19.6,8.6c-0.9,5.4-1.7,10.9-2.3,16.3l-0.2,0.9 c4.7,1,9.4,1.9,14.1,2.8c-1.8,2.8-3.5,6.1-6.8,7.3c-3.9,1.3-8,1.6-11.8,2.7c-0.4,2.2-1.2,6.5-1.6,8.7c8.6,0.1,17.3,0.3,25.9,0.5 c0.1,4.6,0.2,9.2-0.9,13.7c-5.8,3.5-4.9,11.1-6,16.9c-8.8,0.4-13.9-7.6-21.8-9.6c-3.3,6.2-5,13-5.7,20c-4.9-2.8-9.9-5.1-15-7.3 c-1.3-0.7-2.7-1.1-4.1-0.9c-10.5,0.6-21.1,1-31.6,1.1c0-0.8,0-2.5,0-3.3c3.1-1.8,6.3-3.4,9.5-5.1c-0.9-3.9-0.8-9.2-4.7-11.4 c-5.3-1.1-5.9,6-8,9.5c-5.8-2.1-11.8-3.2-17.9-3.3c-1.2,0-2.4,0-3.5,0c-4.7,0.1-9.8,0.2-14,2.6c-2,3.2-2,7.4-4.5,10.3 c-6.2,0-12.3-0.9-18.5-0.7c-3.2,0.4-5.9,2.5-9.2,2.7c-1.8-0.6-3.3-1.9-5-3l-0.1-1c-0.1-1.5-0.1-3.1-0.1-4.6 c-7,0.1-14.5-1.5-20.9,1.9c-4.1,1.7-7.8,4.3-10.8,7.5c-2.6,0.5-5.2,0.9-7.9,1.2c-2.1-4.5-2.6-9.5-5.2-13.8 c-5.6-6.1-17.8-7.5-18.2-17.5c5.1-6,12.5-10.2,20.3-11.6c-0.7-4.3-2.1-8.8-5.3-11.9c-6.3-3.8-7.1,6.6-13.2,5 c-11.8,0.7-23.6-4.6-32.9-11.5c-0.1-0.5-0.3-1.5-0.3-2c-0.1-0.4-0.3-1.1-0.3-1.5c-6.4-0.6-14.1,2.5-19.3-2.5 c-4.7-3.5-7.5-8.9-12.3-12.4c-1-0.8-2-1.6-3.1-2.3c4.1-1.9,8.6-3.8,11-7.8c3.7-6.2,5.3-13.5,5.5-20.6c0-1.1-0.4-2-1.1-2.9 c-4.3-1.4-9.3-0.3-13.4-2.5c-5-7.2-6.1-16.3-10.9-23.5c-6.8-0.3-13.5,0.7-20.1,1.9c-1.3-7.6,1-17.9-6.4-23.1 c-0.3-0.8-0.7-1.6-1.1-2.4c-3.8-6.3-5.6-13.3-5.5-20.7c4,0.2,8.1,0.6,12.2,0.9c2.4,0.2,4.8,0.5,7.3,0.7c0.4,0,1.2,0.1,1.6,0.2 c2.4-3,5.5-5.4,7.8-8.5c1-2,2.2-6.4,0.7-9.3c-1.5-2.8-3.7-3.8-5-4c-1-2-1-2-1-4c12.6-0.7,24.7-1.5,37.2-2.9c4.6,0,9,1.4,13.6,1.8 c3.4,0.4,6.8,0.7,10.2,1.1l0.9,0.1c2.8,0.7,5.6,1.3,8.4,1.8c1.2-6,2.6-12,3.9-18c1.3,0.1,2.5,0.3,3.8,0.5c1.4,4.2,0.4,9.6,3.5,13 c4.7,2.6,10.3,0.6,15.3,0.3c6.2-0.7,10.3-5.9,15.5-8.8C554,156.6,557.1,152.7,560.8,149.4z M560.5,180.6"/> </g> </svg>
Try removing from the SVG header style =" enable-background: new 0 0 1080 700; " xml: space = "preserve" Modern browsers don't handle this right now. Specify the fill color explicitly - <path fill="dodgerblue" <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1080 700"> <g> <path fill="dodgerblue" class="st0 state" data-state="Some text 1" d="M323.3,243.1c8,5,22.6,10,30,12c7.2,1.3,6.9-0.8,14-2c6.6,6.6,18.8,8.9,24,17c2.9,4.3,3.9,7.1,5.6,12.1 c2.9,11.4,12.6,20.4,11.2,32.9c-2.7-0.1-5.4-0.2-8-0.2c-2.6-8.5-5.6-17-7.2-25.8c-3.5,0-9.1-0.1-12.6,0c-2,5-6.4,8.3-8,13 c1,2,4.1,3.9,6,5c1,8.5,8.8,19.2,1.5,26.5c-4.9,5.4-2.2,13.4,1.1,19c5.9,9.3-0.7,18.2-3.6,27.5c-9.9-0.7-18.6-3.6-24-11.8 c-6-0.2-10.9-1.3-17-1.2c1.9-8.2,3.1-12.6,4-21c4.7,4.6,9.6,9.2,17,9c-0.1-4.7,1.5-12-1-17c-3.1-2.7-11.6-9.7-14-10 c0.2-4.3,0.6-11.5,2-19c1.7-8.8,6.5-20.2,7-30c0.3-6.5-3.1-13.2-4-15c-1-0.5-5.7-0.8-9-1c-3.4-0.2-5.5-0.1-7,1c-3.2-4-6-5-12-7 c-1,3-2.8,9.2-2,12c0,2,2.2,3.4,3,6c0.6,1.9,0,3.3,0,5c-13.5-0.3-24.7,0.9-38.1-0.9c-6.4-1.7-10.9-7.1-16.4-10.3 c-3-1.5-4.3-2.7-7.4-3.8c0-3-0.1-4.1,0-7c2.2,0,16.5,6.2,33,4C304.7,260.2,318.4,249.8,323.3,243.1z"/> </g> <g> <path fill="dodgerblue" class="st1 state" data-state="Some text 2" d="M560.8,149.4c2.5-2.3,5.8-0.3,8.3,0.8c4.8,2.6,10.2,4.3,14.6,7.5c4.1,3.8,7.9,8.7,13.7,9.9 c9.8,1.4,20.1,0.2,29.5,4c4.4,2.9,7.9,6.9,11.5,10.7c5.3,5.7,6.8,13.6,10.4,20.3c1.7,3.5,6,3.9,9.1,5.4 c7.7,2.7,14.5,7.7,22.3,10.1c7.9,2.6,14.6,7.5,22.3,10.6c14.5,4.7,28.3,11.5,40.5,20.6c5.8,4.2,12.9,6.8,17.7,12.3 c1.8,2.1-0.6,4.6-1.2,6.6l-0.3,0.7c-4,7.6-5,16.7-10.4,23.5c-5,5.5-12.9,6.4-19.6,8.6c-0.9,5.4-1.7,10.9-2.3,16.3l-0.2,0.9 c4.7,1,9.4,1.9,14.1,2.8c-1.8,2.8-3.5,6.1-6.8,7.3c-3.9,1.3-8,1.6-11.8,2.7c-0.4,2.2-1.2,6.5-1.6,8.7c8.6,0.1,17.3,0.3,25.9,0.5 c0.1,4.6,0.2,9.2-0.9,13.7c-5.8,3.5-4.9,11.1-6,16.9c-8.8,0.4-13.9-7.6-21.8-9.6c-3.3,6.2-5,13-5.7,20c-4.9-2.8-9.9-5.1-15-7.3 c-1.3-0.7-2.7-1.1-4.1-0.9c-10.5,0.6-21.1,1-31.6,1.1c0-0.8,0-2.5,0-3.3c3.1-1.8,6.3-3.4,9.5-5.1c-0.9-3.9-0.8-9.2-4.7-11.4 c-5.3-1.1-5.9,6-8,9.5c-5.8-2.1-11.8-3.2-17.9-3.3c-1.2,0-2.4,0-3.5,0c-4.7,0.1-9.8,0.2-14,2.6c-2,3.2-2,7.4-4.5,10.3 c-6.2,0-12.3-0.9-18.5-0.7c-3.2,0.4-5.9,2.5-9.2,2.7c-1.8-0.6-3.3-1.9-5-3l-0.1-1c-0.1-1.5-0.1-3.1-0.1-4.6 c-7,0.1-14.5-1.5-20.9,1.9c-4.1,1.7-7.8,4.3-10.8,7.5c-2.6,0.5-5.2,0.9-7.9,1.2c-2.1-4.5-2.6-9.5-5.2-13.8 c-5.6-6.1-17.8-7.5-18.2-17.5c5.1-6,12.5-10.2,20.3-11.6c-0.7-4.3-2.1-8.8-5.3-11.9c-6.3-3.8-7.1,6.6-13.2,5 c-11.8,0.7-23.6-4.6-32.9-11.5c-0.1-0.5-0.3-1.5-0.3-2c-0.1-0.4-0.3-1.1-0.3-1.5c-6.4-0.6-14.1,2.5-19.3-2.5 c-4.7-3.5-7.5-8.9-12.3-12.4c-1-0.8-2-1.6-3.1-2.3c4.1-1.9,8.6-3.8,11-7.8c3.7-6.2,5.3-13.5,5.5-20.6c0-1.1-0.4-2-1.1-2.9 c-4.3-1.4-9.3-0.3-13.4-2.5c-5-7.2-6.1-16.3-10.9-23.5c-6.8-0.3-13.5,0.7-20.1,1.9c-1.3-7.6,1-17.9-6.4-23.1 c-0.3-0.8-0.7-1.6-1.1-2.4c-3.8-6.3-5.6-13.3-5.5-20.7c4,0.2,8.1,0.6,12.2,0.9c2.4,0.2,4.8,0.5,7.3,0.7c0.4,0,1.2,0.1,1.6,0.2 c2.4-3,5.5-5.4,7.8-8.5c1-2,2.2-6.4,0.7-9.3c-1.5-2.8-3.7-3.8-5-4c-1-2-1-2-1-4c12.6-0.7,24.7-1.5,37.2-2.9c4.6,0,9,1.4,13.6,1.8 c3.4,0.4,6.8,0.7,10.2,1.1l0.9,0.1c2.8,0.7,5.6,1.3,8.4,1.8c1.2-6,2.6-12,3.9-18c1.3,0.1,2.5,0.3,3.8,0.5c1.4,4.2,0.4,9.6,3.5,13 c4.7,2.6,10.3,0.6,15.3,0.3c6.2-0.7,10.3-5.9,15.5-8.8C554,156.6,557.1,152.7,560.8,149.4z M560.5,180.6"/> </g> </svg>
You cannot show .svg images in iOS OS below 13. From Apple's Xcode 12 release notes: Asset Catalogs New Features Added support for Scalable Vector Graphic (SVG) image assets. These preserve their vector representation with deployment targets of macOS 10.15 or later, iOS 13 or later, and iPadOS 13 or later. (18389814) However you can use libraries eg: https://github.com/mchoe/SwiftSVG. But this doesn't not gurantee loading all types of svg images.
SVGs with linear gradient not handled by Cordova - iOS
We are implementing icons in our Ionic / Cordova app that uses SVG icons and whenever exported from Adobe XD, and implemented in the iOS version of the app, the gradient part of the icon shows correctly on Web (Chromium based browsers like Edge / Chrome) and Android but not on iOS.
This is how the icon looks normally in Chrome/Edge/Android and in XD:
And this what the icon looks like once in Cordova - iOS:
As you can see, the dot on the icon that has normally a gradient appears black. We cannot figure out why.
Here is the code of the SVG that Adobe XD produces:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#5d5d5d;stroke-linecap:round;stroke-width:1.5px;}.b,.c{stroke-miterlimit:10;}.c{stroke:#fff;fill:url(#a);}</style><linearGradient id="a" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#d9315d"/><stop offset="1" stop-color="#dc2224"/></linearGradient></defs><g transform="translate(0 0)"><rect class="a" width="24" height="24"/><g transform="translate(-1047.065 -371.769)"><path class="b" d="M1057.747,389.029v-4.016a3.157,3.157,0,0,0-.211-1.137l-.07-.183a2.228,2.228,0,0,0-.4-.662l-.8-.921-.566-.653-4.345-5.017a.224.224,0,0,1,.169-.37h18.052a.223.223,0,0,1,.169.37l-4.923,5.685-.658.76a3.359,3.359,0,0,0-.552.883h0a3.179,3.179,0,0,0-.253,1.243v9.081a.224.224,0,0,1-.355.182l-2.889-2.074" transform="translate(-1.701 -1.801)"/><circle class="c" cx="4.593" cy="4.593" r="4.593" transform="translate(1047.565 372.269)"/></g></g></svg>
Because we thought maybe Adobe XD produces some non compliant code of some sort, we decided to just put it through some SVG sanitizer like this one: http://svg.enshrined.co.uk/ , producing the following code:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#5d5d5d;stroke-linecap:round;stroke-width:1.5px;}.b,.c{stroke-miterlimit:10;}.c{stroke:#fff;fill:url(#a);}</style>
<linearGradient id="a" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#d9315d"></stop>
<stop offset="1" stop-color="#dc2224"></stop>
</linearGradient>
</defs>
<g transform="translate(0 0)">
<rect class="a" width="24" height="24"></rect>
<g transform="translate(-1047.065 -371.769)">
<path class="b" d="M1057.747,389.029v-4.016a3.157,3.157,0,0,0-.211-1.137l-.07-.183a2.228,2.228,0,0,0-.4-.662l-.8-.921-.566-.653-4.345-5.017a.224.224,0,0,1,.169-.37h18.052a.223.223,0,0,1,.169.37l-4.923,5.685-.658.76a3.359,3.359,0,0,0-.552.883h0a3.179,3.179,0,0,0-.253,1.243v9.081a.224.224,0,0,1-.355.182l-2.889-2.074" transform="translate(-1.701 -1.801)"></path>
<circle class="c" cx="4.593" cy="4.593" r="4.593" transform="translate(1047.565 372.269)"></circle>
</g>
</g>
</svg>
Which at first look does some cleaner, but still does not fix our issue.
Most of the icons we use have this gradient in some form or another. And we have other examples of these icons unable to use the gradient in Cordova - iOS version.
So rendering SVG likely has less to do with Cordova, but with specific browser ability to handle SVG.
In your case it seems like you apply "gradient" using url(...) reference within css.
Safari introduced a requirement for the url in this case to feature "absolute" path.
Try the same icon but change the way you refer url from:
fill:url(#a)
to:
fill:url(https://yourwebsite.com/yourpage/#a)
Basically you need something like this for Safari:
fill: url( {{ location.href }}#filterOrGradientId )
It is a pain to work around this issue. So one suggestion could be also to try referring the gradient using fill attribute on the svg circle element.
Example from MDN:
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my linear gradient -->
<circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
How to use fontello icons with transparency on iOS
I've a problem with custom font icons generated from svg using fontello. On PC, icons works fine, but on iOS browsers I haven't transparency. All source svg contains fill-rule: evenodd.
I can't find solution for my problem, if You know how solve this issue, please help.
On PC custom fontello icons works fine, but on iOS I've a problem. I'm not sure if the Android works well, but iOS has a higher priority.
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
<defs>
<style>
.cls-1 {
fill-rule: evenodd;
}
</style>
</defs>
<path class="cls-1" d="M0,20V33l2,5,2,4,4,4,3,3,6,3,3,1H33l3-1,6-3,1-2h2v1l1,4L66,72h1l5-5V66L52,46l-2-1-2-1V43l2-3,1-1,1-3,1-3V20l-2-5-2-4L45,7,40,3,38,2,33,0H20L15,2,10,5,7,8,5,10,3,13,1,17Zm16-9-3,3-3,4L9,21,8,27l1,6,2,4,4,4,3,2,2,1,5,1h4l4-1,4-2,4-3,2-4,2-6V25l-1-5-1-2-2-3-3-3-3-2L28,8,21,9l-3,1Z"/>
</svg>
Effect on Desktop (ok): https://ibb.co/9pfZFnf
Effect on iOS (not ok): https://ibb.co/Y846vb0
Apparently it didn't get the css rules. Please try to use the css like this, although I'm not very sure this will work.
<style type="text/css">
<![CDATA[
.cls-1 {
fill-rule: evenodd;
}
]]>
</style>
Alternatively you can reverse the second part of the d attribute (the hole) so that you don't need to use the fill-rule: evenodd;
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
<path class="cls-1" d="M0,20V33l2,5,2,4,4,4,3,3,6,3,3,1H33l3-1,6-3,1-2h2v1l1,4L66,72h1l5-5V66L52,46l-2-1-2-1V43l2-3,1-1,1-3,1-3V20l-2-5-2-4L45,7,40,3,38,2,33,0H20L15,2,10,5,7,8,5,10,3,13,1,17Z
M18,10L21,9L28,8L35,10L38,12L41,15L43,18L44,20L45,25L45,29L43,35L41,39L37,42L33,44L29,45L25,45L20,44L18,43L15,41L11,37L9,33L8,27L9,21L10,18L13,14L16,11z"/>
</svg>
SVG fill color change after resize make the svg invisible
I have an inline svg with a filter applied to it for shadow effect on the right and buttom of the SVG .
<div id="d78" class="drag" style="width: 52px; margin: 0 auto;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 138 138" >
<defs>
<filter id="blurFilter2" y="-10" height="40" x="-10" width="150">
<feOffset in="SourceAlpha" dx="3" dy="3" result="offset2"></feOffset>
<feGaussianBlur in="offset2" stdDeviation="3" result="blur2">/feGaussianBlur>
<feMerge>
<feMergeNode in="blur2"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<rect class="rrfNode" fill="#4B4F54" x="0" y="0" width="130" height="130" style="filter: url(#blurFilter2); " />
</svg>
The container div is draggable and resizeable through jquery UI plugin . The container div has a color picker icon attached to it which when clicked displays the color palette and on choosing any color the svg rect changes to that particular color for which I have written some jquery .
Now when I resize the svg and then try to use the color picker to change color of the svg rect , the svg just disappears from view even though I can see that the svg color is getting set when I inspect the element in the Chrome browser .
The jquery code to change color is :
$(document).on('changeColor','.fa-eyedropper',function(e) {
$(this).parents(".ui-draggable").find(".rrfNode").css({ fill: color.toHex()});
});
The invisible svg reappears again after I resize the svg .
When I delete the filter this problem gets resolved . But I need to keep both the resize and the color picker along with the filter .
I suspect that it is a problem with the filter , but I cannot figure that out . After searching and trying to solve this bug for 2 days I am posing this question . Please help .
Found out the reason behind this strange behaviour . The filter id in all the svg images were the same so any change to any of the svgs would result in the shadows of other svg images disappearing along with the content of the images, in effect the image will disappear. I changed the filter ids for the svg images , such that all svgs have unique filter ids and that has solved my problem . It was a very silly mistake on my part.
How do I stop iOS from converting a small pointing right triangle character into a rectangluar boxed triangle symbol?
I've tried entering the small pointing right triangle and the right arrow characters, both are converted by iOS into rectangular icons with a right triangle and a right arrow, respectively. Can I declare a different font to stop this from happening? Or is there a default setting I need to turn off? All a want is a black small pointing right triangle: Decimal Hex ▸ 9656 ▸ 25B8 Here is the Code: NSString *title = [NSString stringWithFormat:#"%d payments of %# ➡ ▶", duration, [Utils formatPrice:payment]]; [button setTitle: title forState: UIControlStateNormal]; Any suggestions would be appreciated.
This is not about changing font, but about unicode variation. On Unicode 6.1, one unicode code point can have multiple glyphs, and you can choose those using Variation Selectors. For about emoji, you can use U+FE0E(#"\U0000FE0E") to choose text style graph. (And, U+FE0F(#"\U0000FE0F") is for Apple Color Emoji). For example, LEFT-POINTING TRIANGLE's unicode code point is U+25C0(#"\U000025C0"), and you can specify not to use Apple Color Emoji but non-color symbol like #"\U000025C0\U0000FE0E". Also, there is some difference between iOS emulator(for iOS6 on Mountain Lion) and actual device(iOS6) about Variation Selector handling, probably because Mountain Lion have more support for Unicode 6.1, I guess. For example, if I don't specify the selectors, I see non-color triangle on iOS6 device, but Apple Color triangle on iOS6 simulator(on Mountain Lion), for UIBarButton. So, it is nice to check both simulator and actual device, but it looks more safe to use Unicode Variation Selectors always anyway.
It was kind of challenging to force the Browser to render the HTML Entity on iPads/iPhones, but I managed to find the solution, and here's the trick.
Instead of using HTML entities directly:
◀ <!-- ◀ BLACK LEFT-POINTING TRIANGLE -->
▶ <!-- ▶ BLACK RIGHT-POINTING TRIANGLE -->
I created supportive elements in HTML, with the classes:
<span class="left-pointing-triangle"> </span>
<span class="right-pointing-triangle"> </span>
With the use of CSS ::after pseudo-element made the override of the content:
.left-pointing-triangle::after {
content: "\25C0 \FE0E";
}
.right-pointing-triangle::after {
content: "\25B6 \FE0E";
}
The important part is to use content: "\25C0 \FE0E", instead of just symbol itself content: "\25C0". It works flawlessly on both iPads and iPhones of different iOS versions.
I use these unicode characters to stop iOS from fiddling: Right-triangle: ► (►) Left-triangle: ◄ (◄) Update If further triangles are what you seek: Up-triangle: ▲ (▲) Down-triangle: ▼ (▼)
To show the black right arrow emoji, we should choose ▸ instead of ▶ or ► in order to avoid Apple Emoji ▸ is smaller than the other two, but you can set the font-size to adjust it. Works for me.
You can render small triangles in SVG on modern browsers. Right Triangle: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 5 10"> <polygon fill="black" points="0,0 5,5 0,10" /> </svg> Left Triangle: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 5 10"> <polygon fill="black" points="0,5 5,0 5,10" /> </svg>
That appears to be the system font glyph for 25B8. I would assume the same would happen for 2B05 (Leftwards Black Arrow) and 25C0 (Black Left-Pointing Triangle). They are apart of Apple Emoji. You may want to try using a different font. Hope that helps.