Полное выравнивание Android и автоматическое расставление переносов с помощью Hyphenator.js

Я пытаюсь полностью оправдать текст в Android с помощью автоматического расстановки переносов. Я добился полного обоснования с помощью WebView, как описано здесь. Я прочитал пару тем об авто-переносах в Android, но ни одна из них не применима к WebViews. Я пытался использовать новые дефисы CSS3: auto (включая -webkit-hyphens: auto), но Android WebKit пока не поддерживает его.

Я нашел сообщение в блоге здесь, в котором упоминается использование JavaScript с расстановкой переносов, но я понятия не имею, как его реализовать (JavaScript и HTML следующие в списке задач). Из-за размера файла .js я не хочу просто использовать webView.loadUrl("javascript:someFunction()");

Вот код, который я сейчас использую:

public class TestWebView extends Activity {
@Override
public void onCreate (Bundle savedState) {
    WebView webView;
    super.onCreate(savedState);
    webView = new WebView(this);
    setContentView(webView);
    WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webView.loadUrl("file:///android_asset/WorkingExample.html");
    }
}

Вот HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Hyphenator.js</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type="text/css">
            body {
                width:30%;
                margin-left:35%;
                margin-right:35%;
            }
            .text {
                text-align:justify;
            }
    </style>
    <script src="Hyphenator.js" type="text/javascript"></script>
    <script type="text/javascript">
        Hyphenator.config({
            displaytogglebox : true,
            minwordlength : 4
        });
        Hyphenator.run();
        </script>
    </head>
    <body>
        <h1>Example of using Hyphenator.js</h1>
        <h2>Deutsch</h2>
        <p class="hyphenate text" lang="de">Deutschsprachige Beispieltexte haben natürlicherweise längere Wortzusammensetzungen als englischsprachige. Aber auch <span lang="en">“hyphenation”</span> ist ein ziemlich langes Kompositum.</p>
        <p class="hyphenate text" lang="de">Verändern Sie die Fenstergrösse um den Effekt der Silbentrennung zu sehen.</p>
        <h2>English</h2>
        <p class="hyphenate text" lang="en">English words are shorter in the average then german words. <span lang="de">«Silbentrennungsalgorithmus»</span> for example is quite long.</p>
        <p class="hyphenate text" lang="en">Resize the window to see hyphenation in effect.</p>
        <h2>Links</h2>
        <p class="hyphenate text" lang="en">Not only words but also links like <a href="http://code.google.com/p/hyphenator/">http://code.google.com/p/hyphenator/</a> are processed. But in a special manner (using zero width space).</p>
    </body>
</html>

Рядом с html-файлом хранится файл Hyphenator.js. Открытие HTML-файла в браузере моего компьютера работает должным образом, но на телефоне мне не повезло:Браузер компьютера (  FF) vs WebView В конце концов, я хочу, чтобы текст генерировался динамически, но просто заставить это работать было бы огромной помощью. Спасибо.


person willlma    schedule 31.01.2013    source источник


Ответы (2)


Итак, у вас есть WorkingExample.html и Hyphenator.js в file:///android_asset/? Думаю, вы забыли скачать папку "patterns" (в вашем случае нужно de.js и en-us.js под file:///android_asset/patterns/). Вы можете получить их здесь.

Обновление: возьмите все, что вам нужно, и поместите это в свои активы:

введите здесь описание изображения

Рабочий пример.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Hyphenator.js</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script src="Hyphenator.js" type="text/javascript"></script>
        <script type="text/javascript">
            Hyphenator.config({
                minwordlength : 4
            });
        </script>
    </head>
    <body>
        <p id="text" class="hyphenate text" lang="en"></p>
    </body>
</html>

Основная деятельность:

public class MainActivity extends Activity {

    WebView mWebView;
    String mText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mText = "English words are shorter in the average then german words. <span lang=\"de\">Silbentrennungsalgorithmus</span> for example is quite long.";

        mWebView = (WebView) findViewById(R.id.mWebView);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("file:///android_asset/WorkingExample.html");
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                mWebView.loadUrl("javascript:(function() { "
                        + "document.getElementById('text').innerHTML='" + mText
                        + "';" + "Hyphenator.run();" + "})()");
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

Activity_main:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <WebView
        android:id="@+id/mWebView"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true" />

</RelativeLayout>
person Markus Rubey    schedule 03.08.2013
comment
Спасибо за это. Я больше не работаю над проектом, но дам вам знать, как это работает, когда вернусь к нему. - person willlma; 12.08.2013

Следующая библиотека поддерживает переносы. Он выполняет все типы выравнивания текста (влево/вправо/по центру/по ширине) и расставляет переносы. Добавлены не все языки, но при необходимости их можно добавить. Эта библиотека не использует БЕЗ WEBVIEWS и ПОДДЕРЖИВАЕТ SPANNABLES и допускает ДЛИННЫЙ ТЕКСТ.

БИБЛИОТЕКА: https://github.com/bluejamesbond/TextJustify-Android

Android: от 2.2 до 5.X

НАСТРОЙКА

DocumentView documentView = addDocumentView(new StringBuilder("Your long text content"), DocumentView.PLAIN_TEXT);
documentView.getDocumentLayoutParams().setTextAlignment(TextAlignment.JUSTIFIED);
documentView.getDocumentLayoutParams().setHyphenator(new Hyphenator(HyphenPattern.PT));
documentView.getDocumentLayoutParams().setHyphenated(true);
person Mathew Kurian    schedule 14.01.2015