Issues converting NSAttributedString to HTML and back again - html

I know that this issue is pretty much the same issue as the one reported by Konstantin Heinrich here but since there was no satisfactory solution given, I thought I'd bring this up again.
I'm basically trying to apply some rich formatting to text in a standard UITextView, convert it to HTML, convert it back to an NSAttributedString and display it in a UITextView again. Below you can find the methods I'm using to convert to and from NSAttributedString.
- (NSString *)htmlStringFromAttributedString:(NSAttributedString *)attributedString {
NSError *error;
NSData *htmlData = [attributedString dataFromRange:NSMakeRange(0, attributedString.length)
documentAttributes:#{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType}
error:&error];
if (error) {
NSLog(#"%#", error);
return nil;
}
NSString *htmlString = [[NSString alloc] initWithData:htmlData encoding:NSUTF8StringEncoding];
return htmlString;
}
- (NSAttributedString *)attributedStringFromHTMLString:(NSString *)htmlString {
NSError *error;
NSAttributedString *attributedString = [[NSAttributedString alloc] initWithData:[htmlString dataUsingEncoding:NSUTF8StringEncoding]
options:#{NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType}
documentAttributes:nil
error:&error];
if (error) {
NSLog(#"%#", error);
return nil;
}
return attributedString;
}
Now everything works smoothly with the exception that the font size for the NSAttributedString which has been generated from the HTML string is bigger than the original one. If I use RTF instead of HTML (i.e. simply replacing NSHTMLTextDocumentType with NSRTFTextDocumentType) everything works as expected as you can see in the screenshot.
To be perfectly honest, I'm tempted to believe that we're looking at a bug in the Foundation framework here. Especially given the console output of the NSAttributedString generated from HTML. See how only the last chunk of attributes (the one that does not even affect any text anymore) contains the correct font size?
Some {
NSColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSFont = "<UICTFont: 0x7fdde3919b70> font-family: \"Avenir-Light\"; font-weight: normal; font-style: normal; font-size: 20.00pt";
NSKern = 0;
NSParagraphStyle = "Alignment 4, LineSpacing 0, ParagraphSpacing 0, ParagraphSpacingBefore 0, HeadIndent 0, TailIndent 0, FirstLineHeadIndent 0, LineHeight 28/0, LineHeightMultiple 0, LineBreakMode 0, Tabs (\n), DefaultTabInterval 36, Blocks (\n), Lists (\n), BaseWritingDirection 0, HyphenationFactor 0, TighteningForTruncation NO, HeaderLevel 0";
NSStrokeColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSStrokeWidth = 0;
}simple{
NSColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSFont = "<UICTFont: 0x7fdde39172f0> font-family: \"Avenir-Heavy\"; font-weight: bold; font-style: normal; font-size: 20.00pt";
NSKern = 0;
NSParagraphStyle = "Alignment 4, LineSpacing 0, ParagraphSpacing 0, ParagraphSpacingBefore 0, HeadIndent 0, TailIndent 0, FirstLineHeadIndent 0, LineHeight 28/0, LineHeightMultiple 0, LineBreakMode 0, Tabs (\n), DefaultTabInterval 36, Blocks (\n), Lists (\n), BaseWritingDirection 0, HyphenationFactor 0, TighteningForTruncation NO, HeaderLevel 0";
NSStrokeColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSStrokeWidth = 0;
} text {
NSColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSFont = "<UICTFont: 0x7fdde3919b70> font-family: \"Avenir-Light\"; font-weight: normal; font-style: normal; font-size: 20.00pt";
NSKern = 0;
NSParagraphStyle = "Alignment 4, LineSpacing 0, ParagraphSpacing 0, ParagraphSpacingBefore 0, HeadIndent 0, TailIndent 0, FirstLineHeadIndent 0, LineHeight 28/0, LineHeightMultiple 0, LineBreakMode 0, Tabs (\n), DefaultTabInterval 36, Blocks (\n), Lists (\n), BaseWritingDirection 0, HyphenationFactor 0, TighteningForTruncation NO, HeaderLevel 0";
NSStrokeColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSStrokeWidth = 0;
}with{
NSColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSFont = "<UICTFont: 0x7fdde3919b70> font-family: \"Avenir-Light\"; font-weight: normal; font-style: normal; font-size: 20.00pt";
NSKern = 0;
NSParagraphStyle = "Alignment 4, LineSpacing 0, ParagraphSpacing 0, ParagraphSpacingBefore 0, HeadIndent 0, TailIndent 0, FirstLineHeadIndent 0, LineHeight 28/0, LineHeightMultiple 0, LineBreakMode 0, Tabs (\n), DefaultTabInterval 36, Blocks (\n), Lists (\n), BaseWritingDirection 0, HyphenationFactor 0, TighteningForTruncation NO, HeaderLevel 0";
NSStrokeColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSStrokeWidth = 0;
NSUnderline = 1;
} {
NSColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSFont = "<UICTFont: 0x7fdde3919b70> font-family: \"Avenir-Light\"; font-weight: normal; font-style: normal; font-size: 20.00pt";
NSKern = 0;
NSParagraphStyle = "Alignment 4, LineSpacing 0, ParagraphSpacing 0, ParagraphSpacingBefore 0, HeadIndent 0, TailIndent 0, FirstLineHeadIndent 0, LineHeight 28/0, LineHeightMultiple 0, LineBreakMode 0, Tabs (\n), DefaultTabInterval 36, Blocks (\n), Lists (\n), BaseWritingDirection 0, HyphenationFactor 0, TighteningForTruncation NO, HeaderLevel 0";
NSStrokeColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSStrokeWidth = 0;
}formatting{
NSColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSFont = "<UICTFont: 0x7fdde1f43a20> font-family: \"Avenir-HeavyOblique\"; font-weight: bold; font-style: italic; font-size: 20.00pt";
NSKern = 0;
NSParagraphStyle = "Alignment 4, LineSpacing 0, ParagraphSpacing 0, ParagraphSpacingBefore 0, HeadIndent 0, TailIndent 0, FirstLineHeadIndent 0, LineHeight 28/0, LineHeightMultiple 0, LineBreakMode 0, Tabs (\n), DefaultTabInterval 36, Blocks (\n), Lists (\n), BaseWritingDirection 0, HyphenationFactor 0, TighteningForTruncation NO, HeaderLevel 0";
NSStrokeColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSStrokeWidth = 0;
}.{
NSColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSFont = "<UICTFont: 0x7fdde3919b70> font-family: \"Avenir-Light\"; font-weight: normal; font-style: normal; font-size: 20.00pt";
NSKern = 0;
NSParagraphStyle = "Alignment 4, LineSpacing 0, ParagraphSpacing 0, ParagraphSpacingBefore 0, HeadIndent 0, TailIndent 0, FirstLineHeadIndent 0, LineHeight 28/0, LineHeightMultiple 0, LineBreakMode 0, Tabs (\n), DefaultTabInterval 36, Blocks (\n), Lists (\n), BaseWritingDirection 0, HyphenationFactor 0, TighteningForTruncation NO, HeaderLevel 0";
NSStrokeColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSStrokeWidth = 0;
}
{
NSColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSFont = "<UICTFont: 0x7fdde1f75740> font-family: \"Avenir-Book\"; font-weight: normal; font-style: normal; font-size: 15.00pt";
NSKern = 0;
NSParagraphStyle = "Alignment 4, LineSpacing 0, ParagraphSpacing 0, ParagraphSpacingBefore 0, HeadIndent 0, TailIndent 0, FirstLineHeadIndent 0, LineHeight 21/0, LineHeightMultiple 0, LineBreakMode 0, Tabs (\n), DefaultTabInterval 36, Blocks (\n), Lists (\n), BaseWritingDirection 0, HyphenationFactor 0, TighteningForTruncation NO, HeaderLevel 0";
NSStrokeColor = "UIDeviceRGBColorSpace 0 0 0 1";
NSStrokeWidth = 0;
}
Bug or not, does anybody have any idea how to overcome this issue? Preferably without having to manually reset font sizes in the resulting string as suggested for the question referenced at the top? Any help would be appreciated.

Related

How to apply 3D transform only to part of an element in CSS?

I have a container with a gradient mask adding transparency to the top of the view as follows :
.container{
position: fixed;
top: 0;
height: 100vh;
overflow: scroll;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 8vh, rgba(0, 0, 0, 1) 30vh, rgba(0, 0, 0, 1));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 8vh, rgba(0, 0, 0, 1) 30vh, rgba(0, 0, 0, 1));
Is there any way in css to apply this 3d transform only to the top part of the container? Maybe with a 3D matrix?
transform: perspective(1000px) rotateX(10deg);
The objectif being to give a little star wars opening credits style to the fade-out, but only to the topmost part of the view.
Thanks for the help :)

Text-Shadow Over_Ride in Global Class CSS

My text shadow is in the state of Override throughout my HTML / CSS3 Document.
Here are the tags:
html *,
#footerTextdetail {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px (0, 0, 0, 0.3) !important;
}
How to I ensure the Text-Shadow can display properly without being overrided. I cannot locate the override, since the source of override is not documented with Google Chrome Inspection Tool Update Beta CSS/XGS.
Remove html * from your css code it is only reason for override
#footerTextdetail {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px (0, 0, 0,0.3) !important}
Here you are using universal selector(*)...
html *....means target all the elements inside the <html> tag...
...so html * is targeting all the elements, thats why all the elements getting the text-shadow. So better to remove it...
And also your text-shadow value is not valid...you need to use rgba in the second text-shadow and I dont think there is any need of !important rule...Try to avoid it...
#footerTextdetail {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.3);
}
#footerTextdetail {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.3) !important;
}
Replace your code with this Remove html *

gltranslatef doesn't move all of my double int. array

I am working on a 2D platformer, and want the map to move (not too advanced, since I am only in "devstage 1") but when I apply the gltranslatef it doesn't move all textures, only the one in the top left corner.
this is the code, don't worry about other classes because they all work fine.
package Window;
import static org.lwjgl.opengl.GL11.*;
import org.lwjgl.input.Keyboard;
import org.lwjgl.opengl.Display;
import controls.TileChanger;
import Functions.renderer;
import Window.GridHandler;
public class Main {
public static void main(String[] args) {
renderer.begin();
int[][] map = {{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}
};
GridHandler grid = new GridHandler(map);
TileChanger changer = new TileChanger(grid);
float translate_x = 0;
float translate_y = 0;
int speed = 5;
while(!Keyboard.isKeyDown(Keyboard.KEY_Q)) {
glClear(GL_COLOR_BUFFER_BIT);
glPushMatrix();
glTranslatef(translate_x, translate_y, 0);
glEnable(GL_TEXTURE_2D);
if (Keyboard.isKeyDown(Keyboard.KEY_D)) {
translate_x += speed;
}
if (Keyboard.isKeyDown(Keyboard.KEY_A)) {
translate_x -= speed;
}
if (Keyboard.isKeyDown(Keyboard.KEY_S)) {
translate_y += speed;
}
if (Keyboard.isKeyDown(Keyboard.KEY_W)) {
translate_y -= speed;
}
changer.Update();
grid.draw();
glPopMatrix();
Display.update();
Display.sync(60);
}
Display.destroy();
System.exit(0);
}
}
can someone show me how I can apply the gltranslatef to all of the map[][]?
thank you.

how do I make this gradient transparent?

I am using this code to add a gradient behind my menus to make them pop more.
-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
I need the background of my web page to be transparent (so I can see stuff behind it). How do I use this to keep the emphasis around my menus, but make it so I can still see content behind it?
The current syntaxes are:
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
EG.
html {
height: 100%;
background: lightblue;
}
body {
margin: 0;
min-height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
}
The rest of your question isn't quite as...ahem, clear.

CSS is not working in FireFox

The main issue is the following. All images are showing as broken links in FireFox and they are fine in other browsers like Safari, Opera and Chrome.
Then I contacted the support they said it is known issue with CSS when it comes to FireFox.
Here is my CSS code
<head>
<title>My Booklet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
body {
background-color: transparent;
-moz-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-moz-transform-style: preserve-3d;
}
.gwd-table-5il4 {
background-image: none;
-moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-moz-transform-style: preserve-3d;
}
.gwd-tr-qiqz {
background-image: none;
}
.fadein { position:relative; height:335px; width:223px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<script type="text/javascript">
function blink() {
var blinks = document.getElementsByTagName('blink');
for (var i = blinks.length - 1; i >= 0; i--) {
var s = blinks[i];
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 700);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first- child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>
Appreciate any help on this.
I have added some additional script that I am using. the rest of the HTML file is sort of basic html tag for tables, images, and URLs.
Regards,
-webkit is a prefix for Chrome and Safari, it has no effects on Firefox. Firefox one is -moz
Try to add -moz prefixes like :
/* Chrome and Safari */
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
/* Firefox */
-moz-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-moz-transform-style: preserve-3d;
/* Other */
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-style: preserve-3d;
Edit: Add no prefixed properties as Volvox pointed out
For firefox
Add properties with -moz too
-webkit is only for chrome and safari
for example
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
webkit is for google chrome and safari, firefox don't understand this. It use -moz....
like -moz-border-radius
You have to check if firefox can support these functionality.
The first-child has a space in it. Otherwise it works
Old
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first- child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
New
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
http://jsfiddle.net/nZFnS/