HTML livre de la pagination

Parlant d'expérience, attendez-vous à mis beaucoup de temps à cela, même pour un barebones spectateur. EPub reader a été le premier grand projet que j'ai pris lorsque j'ai commencé à apprendre le C#, mais le standard ePub est certainement assez complexe.

Vous pouvez trouver la dernière version de la spécification ePub ici:
http://www.idpf.org/specs.htm
qui comprend l'OPS (Open Publication Structure), OPF (Open Format d'Emballage), et de l'OCF (OEBPS Format de Conteneur).

Aussi, si ça vous aide à tous, voici un lien vers le code source C# du projet que j'ai commencé sur:

https://www.dropbox.com/sh/50kxcr29831t854/MDITIklW3I/ePub%20Test.zip

Ce n'est pas étoffé à tous; je n'ai pas joué avec pendant des mois, mais si je me souviens bien, il suffit de coller un fichier ePub dans le répertoire de débogage, et lorsque vous exécutez le programme d'suffit de taper une partie du nom (par exemple, Sous la Coupole, il suffit de taper "dôme") et il affiche les détails du livre.

Je l'ai eu à travailler correctement pour quelques livres, mais tous les eBooks de Google recherche de Livres a cassé complètement. Ils ont un tout bizarre de mise en œuvre de ePub (pour moi, au moins) par rapport à des livres provenant d'autres sources.

De toute façon, j'espère que certains des éléments de la structure de code dans il pourrait vous aider!

Récemment, j'ai tenté quelque chose de similaire à cela, et ajouté un peu de style CSS pour modifier la mise en page à l'horizontale au lieu de verticale. Cela m'a donné l'effet désiré sans avoir à modifier le contenu de l'Epub en aucune façon.

Ce code devrait travail.

mWebView.setWebViewClient(new WebViewClient() {
    public void onPageFinished(WebView view, String url) {

        //Column Count is just the number of 'screens' of text. Add one for partial 'screens'
        int columnCount = Math.floor(view.getHeight() / view.getWidth())+1;

        //Must be expressed as a percentage. If not set then the WebView will not stretch to give the desired effect.
        int columnWidth = columnCount * 100;

        String js = "var d = document.getElementsByTagName('body')[0];" + 
            "d.style.WebkitColumnCount=" + columnCount + ";" + 
            "d.style.WebkitColumnWidth='" + columnWidth + "%';";
        mWebView.loadUrl("javascript:(function(){" + js + "})()");
    }
});

mWebView.loadUrl("file:///android_asset/chapter.xml");

Donc, fondamentalement, vous êtes l'injection de JavaScript pour modifier le style de l'élément de corps après le chapitre a été chargé (très important). Le seul inconvénient de cette approche est lorsque vous avez des images dans le contenu de la colonne calculée comte va de travers. Il ne devrait pas être trop difficile à résoudre si. Ma tentative allait injecter un peu de JavaScript pour ajouter des attributs width et height à toutes les images dans les DOM qui n'en ont pas.

Espère que cela aide.

-Dan

Il y a plusieurs façons de le faire. Si chaque ligne est dans son propre élément tout ce que vous avez à faire est de vérifier si l'un de ses bords se passe à l'extérieur de la vision (les navigateurs, ou le "livre de la page").

Si vous voulez savoir combien de "pages", il va être en avance, juste temporaire déplacer dans la vue et d'obtenir ce que la ligne une page se termine. Cela pourrait être lent à cause de la page de redistribution est nécessaire pour le navigateur de savoir où tout est.

Sinon je pense que vous pourriez utiliser l'élément HTML5 canvas à mesure du texte et /ou de dessiner du texte.

Quelques infos à ce sujet ici:
https://developer.mozilla.org/en/Drawing_text_using_a_canvas
http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/demo/8_2_canvas_measureText.html

J'ai été en mesure d'améliorer Nacho solution pour obtenir un glissement horizontal de pagination effet avec WebView. Vous pouvez trouver de solution ici et l'exemple code.

Edit:

Solution code.

MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
wv = (HorizontalWebView) findViewById(R.id.web_view);
wv.getSettings().setJavaScriptEnabled(true);
wv.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
injectJavascript();
}
});
wv.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
int pageCount = Integer.parseInt(message);
wv.setPageCount(pageCount);
result.confirm();
return true;
}
});
wv.loadUrl("file:///android_asset/ch03.html");   //now it will not fail here
}
private void injectJavascript() {
String js = "function initialize(){\n" +
"    var d = document.getElementsByTagName('body')[0];\n" +
"    var ourH = window.innerHeight;\n" +
"    var ourW = window.innerWidth;\n" +
"    var fullH = d.offsetHeight;\n" +
"    var pageCount = Math.floor(fullH/ourH)+1;\n" +
"    var currentPage = 0;\n" +
"    var newW = pageCount*ourW;\n" +
"    d.style.height = ourH+'px';\n" +
"    d.style.width = newW+'px';\n" +
"    d.style.margin = 0;\n" +
"    d.style.webkitColumnCount = pageCount;\n" +
"    return pageCount;\n" +
"}";
wv.loadUrl("javascript:" + js);
wv.loadUrl("javascript:alert(initialize())");
}

Dans mon WebChromeClient de onJsAlert obtenir le nombre de pages horizontales qui je passe à la coutume HorizontalWebView pour mettre en œuvre la pagination effet

HorizontalWebView.java

public class HorizontalWebView extends WebView {
private float x1 = -1;
private int pageCount = 0;
public HorizontalWebView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
x1 = event.getX();
break;
case MotionEvent.ACTION_UP:
float x2 = event.getX();
float deltaX = x2 - x1;
if (Math.abs(deltaX) > 100) {
//Left to Right swipe action
if (x2 > x1) {
turnPageLeft();
return true;
}
//Right to left swipe action
else {
turnPageRight();
return true;
}
}
break;
}
return true;
}
private int current_x = 0;
private void turnPageLeft() {
if (getCurrentPage() > 0) {
int scrollX = getPrevPagePosition();
loadAnimation(scrollX);
current_x = scrollX;
scrollTo(scrollX, 0);
}
}
private int getPrevPagePosition() {
int prevPage = getCurrentPage() - 1;
return (int) Math.ceil(prevPage * this.getMeasuredWidth());
}
private void turnPageRight() {
if (getCurrentPage() < pageCount - 1) {
int scrollX = getNextPagePosition();
loadAnimation(scrollX);
current_x = scrollX;
scrollTo(scrollX, 0);
}
}
private void loadAnimation(int scrollX) {
ObjectAnimator anim = ObjectAnimator.ofInt(this, "scrollX",
current_x, scrollX);
anim.setDuration(500);
anim.setInterpolator(new LinearInterpolator());
anim.start();
}
private int getNextPagePosition() {
int nextPage = getCurrentPage() + 1;
return (int) Math.ceil(nextPage * this.getMeasuredWidth());
}
public int getCurrentPage() {
return (int) (Math.ceil((double) getScrollX() / this.getMeasuredWidth()));
}
public void setPageCount(int pageCount) {
this.pageCount = pageCount;
}
}

Vous pouvez regarder http://www.litres.ru/static/OR/or.html?data=/static/trials/00/42/47/00424722.gur.html&art=424722&user=0&trial=1 mais le code peut être fortement obscurci, donc il suffit d'utiliser Firebug pour inspecter les DOM.

Si le lien ne fonctionne pas, comment - vous donnerait fixe.