Answered

Text Heavy Content

12 years ago • updated by 12 years ago • 9

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

Vote

Replies 9
Oldest first
- Newest first
- Oldest first

12 years ago

Still believe a text template would be the ideal solution, just a matter of how that content will be delivered to that text template. Will the content, that you mentioned will be housed in the app, be within a database? As having all the content managed within the WIRE would be cumbersome.

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>

12 years ago

I have implemented the web tag so that i can use html text with a transparent background to fill this content.

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?

12 years ago

As far as the shadow issue, you might try adding an attribute of bounces="yes" This will prevent content that is smaller than the viewport from "rubber banding". Will also "snap" scrollable areas that are larger than the viewports. This will only work on Wire Engine 1.2 and it not yet available in the current version of Fusebox you have, so if you want to see it working, you will need to build an Ad-Hoc and install it on your device.

We should be submitting the new version of fusebox to the App Store this week.

12 years ago

In regards to the shadow, this is a request that has been placed in front of our development team. As a designer, we dread that shadow 80% of the time. We will keep you posted when that makes it into a build of the engine.

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%;}


}

12 years ago

Here is a portion of the html that I am using. I am just including a few sections of the content since it just repeats itself in structure.

<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>

12 years ago

Nothing here really looks that crazy. Would it be possible for you to add Adam and I as collaborators to your App Project in the Studio so we can see first hand?

ajones@rarewire.com
icahill@rarewire.com

Thanks.

12 years ago

Thanks for adding me to your portfolio, but I do not have permission to access the wire editor, you will need to grant me "build" permissions.

:)

12 years ago

I have made a little progress as to the solution of this problem. I was able to get each div to go below the preceding div by using "clear: both" in my styles. Makes sense. My "bottom-border" is giving me trouble in placement since the WIRE will only render a single margin or padding (e.g.: "padding-top" or "padding: 5 0 0 0;"). I need it to have both a padding-top and margin-top of 15 so that my border-top will have spacing on both sides forming a divider between divs. I may have a workaround but didn't think I should have to use it. Just thought I would give an update of the latest progress.

Thanks for all the help so far :)

12 years ago

Sounds like you are making progress.

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" />

Customer support service by UserEcho