+1
Answered
Text Heavy Content
Hi, i need to place a large amount of text that has several header styles and some main content. For example:
HEADER 1
HEADER 2
HEADER 3
CONTENT
HEADER 3
CONTENT
HEADER 2
HEADER 3
CONTENT
HEADER 3
CONTENT
What would be the best way to go about this? I looked into the texttemplate a little bit, but did not think that is what I need since the content will be in the app and not be being pulled in through a datasource
Any thoughts, ideas or answers would be great!
Thanks
HEADER 1
HEADER 2
HEADER 3
CONTENT
HEADER 3
CONTENT
HEADER 2
HEADER 3
CONTENT
HEADER 3
CONTENT
What would be the best way to go about this? I looked into the texttemplate a little bit, but did not think that is what I need since the content will be in the app and not be being pulled in through a datasource
Any thoughts, ideas or answers would be great!
Thanks
Customer support service by UserEcho
Regardless, you can really call your data into the text template in a variety of ways, really will depend on the volume and how that data is stored in the app. The example below would be using vars that would be reassigned each time a user selected a new block of dataset to read.
<texttemplate name="reader" ><![CDATA[
<html>
<head>
<meta content="width=100%, minimum-scale=1, maximum-scale=1, initial-scale=1" name="viewport">
<meta name="apple-mobile-web-app-capable" content="no">
</head>
<body>
<h1>[var:currentHeadline]</h1>
<h2>[var:currentSub]</h2>
<h3>[var:currentAuthor] <span> | [var:currentDate]</span></h3>
[var:currentBody]
</body>
</html>
]]></texttemplate>
So far this is working great! I am having a few styling issues though.
First, the content is longer than the height of the screen which causes it to be scrollable. This is fine. The issue is that it creates a shadow where the top (or bottom) of the HTML document is pulled further down than there is content. I assume that this is just an iOS default. I am wondering if there is any way to turn that off?
Second. I have a few divs in my html. I think they are causing some issues with content that rolls over into the next line. This seems fixable with a fixed height, but i need this to be fluid so as to work on both iPads and iPhones. Any thoughts?
We should be submitting the new version of fusebox to the App Store this week.
Could you post a little of the HTML that is causing you a headache? My first thought is that if it's a matter of forcing some line breaks, you could look at media queries to not only adjust your div dimensions, but to detect orientation for adjustments?
@media screen and (orientation:portrait) {
body {width:80%;}
}
@media screen and (orientation:landscape) {
body {width:85%;}
}
<html>
<head>
<meta name="viewport" content="width=device-width" initial-scale="1.0" user-scalable="no" minimum-scale="1.0" maximum-scale="1.0">
<style type="text/css">
body {max-width="100%";}
start { padding: 0 0 15px 0; border-bottom: solid 1px #FFFFFF; margin: 0 0 15px 0;}
.judge {height: auto; min-height: 250px; padding: 0 0 15px 0; border-bottom: solid 1px #FFFFFF; margin: 0 0 15px 0;}
h1 {color: #CC2628; font-family: Helvetica; margin: 0;}
h2 {color: #CC2628; font-family: Helvetica; margin: 0;}
h3 {color: #FCDE93; font-family: Helvetica-Oblique; margin: 0;}
img {float: left; max-width: 20%; margin: 0 2% 0 0;}
.bio {float: right; max-width: 78%;}
p {color: #FFFFFF; font-family: Helvetica;}
</style>
</head>
<body>
<div class="start">
<h1><strong>MAIN HEADER</strong></h1>
<p>Long description.. Long description.. Long description.. Long description.. Long description.. Long description.. Long description.. Long description.. </p>
</div>
<div class="judge">
<img src="images/thisisanimage.png" />
<div class="bio">
<h2>PERSONS NAME</h2>
<h3>Where he's from</h3>
<p>All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. </p>
</div>
</div>
<div class="judge">
<img src="images/thisisanimage.png" />
<div class="bio">
<h2>PERSONS NAME</h2>
<h3>Where he's from</h3>
<p>All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. All the stuff about this guy.. </p>
</div>
</div>
</body>
</html>
ajones@rarewire.com
icahill@rarewire.com
Thanks.
:)
Thanks for all the help so far :)
Couple tricks for text:
I rarely use padding on the text object, I will actually use a panel object with padding wrapping the text object.
To position consecutive blocks of text I will use a combination of bottom of and margin-top attributes.
<text name="headline" width="100%" height="fit" style="headline" text="Today's News" />
<text name="copy" style="headline" width="100%" height="fit" bottomof="headline" margin-top="10" text="Lots of copy here" />